时间戳

首页 > 解决方案 > Angular 中的可折叠手风琴，无需使用 JS 代码，仅使用 HTML。每当我单击按钮时，它什么也不做。请解决这个

html - Angular 中的可折叠手风琴，无需使用 JS 代码，仅使用 HTML。每当我单击按钮时，它什么也不做。请解决这个

问题描述

我正在尝试使用下面给出的 HTML 代码在我的网页上实现 Accordion 按钮。我目前正在以非常基本的规模实现这一点，而不使用任何带有此手风琴片段的 JavaScript 代码。该按钮只是单击并且什么都不做，基本的折叠不会发生，也没有实现手风琴功能。请帮助我实现这一点！ 

<div class="panel panel-default">
        <div class="panel-heading">
            <button class="btn btn-primary" type="button"
                data toggle="collapse" data-target="#collapseButtonExample" aria- 
                expanded="true" aria-controls="collapseExample">Question 
            </button>
        </div>

        <div class="collapse" id="collapseButtonExample" >
            <div class="card card-body">
                <p></p>
            </div>
        </div>
    </div>

标签： htmlangularaccordion

解决方案

如果有单个元素，这样的东西会起作用

<div class="panel panel-default">
        <div class="panel-heading">
            <button class="btn btn-primary"  type="button" #btn (click)="btn.toggle = !btn.toggle"
              >Question 
            </button>
        </div>

        <div  [ngClass]="{collapse:!btn.toggle}" >
            <div class="card card-body">
                <p>1# something</p>
            </div>
        </div>
    </div>

如果你有很多元素，这个技巧会起作用

<div class="panel panel-default" *ngFor="let i of [1,2,3,4]">
        <div class="panel-heading">
            <button class="btn btn-primary"  type="button" #btn (click)="btn.toggle = !btn.toggle"
              >Question 
            </button>
        </div>

        <div  [ngClass]="{collapse:!btn.toggle}" >
            <div class="card card-body">
                <p>{{i}}# something</p>
            </div>
        </div>
    </div>

stackblitz 演示

推荐阅读