如何在Angular 4中关闭手风琴中的所有菜单 [英] How to close all the menus inside an Accordion in Angular 4

问题描述

我是4号角的新手，在这里我有一个Category，Group和Subgroup结构的手风琴.

I am new to angular 4 here I have an accordion in the structure of Category,Group and Subgroup.

如果我单击类别，它将显示其中的所有组；如果单击组，则将显示所有子组.

If I clicked on category it shows all the groups in it and if I clicked on the groups it shows all the subgroups .

现在一切正常.

我想做的是，如果我再次单击类别"，我想关闭所有以前打开过的组的手风琴.

What I want to do is If I clicked on the Category again I want to close the accordion with all the groups which are opened before.

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

In my case if I opened some groups and closed the accordion then If I opened again it shows the groups opened which I have opened before .

我已经在stackblitz中复制了我的代码:

I have reproduced my code in stackblitz : https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-ghebrf?file=app/app.component.html

谁能帮我修复它.

推荐答案

我不相信仅通过使用href和id就能实现您正在寻找的东西，因为href只接受一个参数.在此处.

i don't believe it's possible to achieve what you are looking for just by using href and ids, because href takes only one argument. Check here.

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

I added event bindings to check when the parent accordion is being toggled to close all the child accordions too.

在此处添加了点击事件:

Added a click event here:

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

并在此处使用了ngIf:

and used a ngIf here:

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

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

Check the full solution here: https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-fjowve?file=app/app.component.html

这篇关于如何在Angular 4中关闭手风琴中的所有菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！