如何在Angular 4中关闭手风琴内的所有菜单

Posted 2023-03-06

【中文标题】如何在Angular 4中关闭手风琴内的所有菜单

【英文标题】：How to close all the menus inside an Accordion in Angular 4

【发布时间】：2018-12-19 06:39:43

【问题描述】：

我是 angular 4 的新手，我在 Category、Group 和 Subgroup 的结构中有一个手风琴。

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

现在一切正常。

我想要做的是，如果我再次单击类别，我想关闭之前打开的所有组的手风琴。

在我的情况下，如果我打开了一些组并关闭了手风琴，那么如果我再次打开它会显示我之前打开过的组。

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

谁能帮我解决它。

【问题讨论】：

所以当您再次点击***别时，您需要将其关闭，并且所有子类别组也需要关闭对吗？

是的，完全是@RamY

可以做@RamY

Broooooooooooooooooooooo @RamY

将在我的实际项目中应用逻辑并让你知道细节，但现在接受答案因为我可以看到我想做的结果@RamY

【参考方案1】：

我不相信仅通过使用 href 和 ids 就可以实现您正在寻找的东西，因为 href 只接受一个参数。检查here。

我添加了事件绑定来检查何时切换父手风琴以关闭所有子手风琴。

在此处添加了点击事件：

    <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

【讨论】：

太棒了，很高兴我能帮上忙，如果它有用请点赞。