时间戳

首页 > 解决方案 > Angular-Side 导航栏，所有子菜单的数据切换折叠

angular - Angular-Side 导航栏，所有子菜单的数据切换折叠

问题描述

我创建了一个带有子菜单的侧导航栏。有章节和在每个章节练习。章节是下拉的，甚至章节内的练习都是下拉的。但是，如果我点击任何一章，所有章节下拉菜单都会打开，如果我点击任何一章，所有其他章节下拉菜单都会崩溃。

<div class="wrapper sidbr">
    <!-- Sidebar -->
    <nav id="sidebar">
        <ul class="list-unstyled components">
            <li *ngFor="let Chap of mchapter" class="active">
                <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">{{Chap.Chapter}}</a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li *ngFor="let Les of Chap.Lesson">
                        <a href="#">{{Les}}</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

标签： angularnavbarcollapsetogglebutton

解决方案

这里正确的参考没有传递到子菜单，试试这样

<div class="wrapper sidbr">
    <!-- Sidebar -->
    <nav id="sidebar">
        <ul class="list-unstyled components">
            <li *ngFor="let Chap of mchapter" class="active">
                <a href="#homeSubmenu-{{Chap.Chapter}}" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">{{Chap.Chapter}}</a>
                <ul class="collapse list-unstyled" id="homeSubmenu-{{Chap.Chapter}}">
                    <li *ngFor="let Les of Chap.Lesson">
                        <a href="#">{{Les}}</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

推荐阅读