jquery - 如何关闭 Angular 4 Accordion 内的所有菜单

Question

我是 Angular 4 的新手，我在类别、组和子组的结构中有一个 Accordion 。

如果我单击类别，它会显示其中的所有组，如果我单击组，它会显示所有子组。

现在一切正常。

我想做的是，如果我再次单击类别，我想关闭包含之前打开的所有组的 Accordion 。

在我的例子中，如果我打开了一些组并关闭了 Accordion ，那么如果我再次打开它会显示我之前打开的组。

我在 stackblitz 中复制了我的代码:https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-ghebrf?file=app/app.component.html

谁能帮我解决一下。

Answer 1

我认为仅使用 href 和 id 不可能实现您正在寻找的东西，因为 href 只接受一个参数。检查here .

我添加了事件绑定(bind)来检查何时切换父 Accordion 以关闭所有子 Accordion 。

在这里添加了一个点击事件:

    <a class="accordion-toggle h6" data-toggle="collapse" data-parent="#accordion1" (click)="onToggle()"  href="#collapseTwo + i">
        {{data?.CAMD_ENTITY_DESC}}
    </a>

并在这里使用了 ngIf:

<div [id]="'collapseInnerTwo' + j"  *ngIf="accordion2==true" class="accordion-body collapse" style="margin-left:10px;margin-top:3px">

在此处查看完整的解决方案: https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-fjowve?file=app/app.component.html