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

Question

我正在尝试使用下面给出的 HTML 代码在我的网页上实现手风琴按钮。我目前正在非常基本的规模上实现这一点，而不使用任何 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>

Answer 1

如果只有一个元素，这样的方法会起作用

<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 demo

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

Collapsible Accordion in Angular WITHOUT using a JS code, But only HTML. Whenever I click the button, it does nothing. Please solve this

html

accordion

angular