0

我正在使用 SB Admin 引导主题，但无法正确折叠左侧菜单。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-default sidebar" role="navigation">
    <div class="sidebar-nav nav-collapse">
        <ul class="nav" id="side-menu">
            <li>
                <a href="#"><i class="fa fa-cog fa-fw"></i> Top level 1 (this one collapses correctly)<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level collapse">
                    <li> Second level 1</li>
                    <li> Second level 2</li>
                </ul>
            </li>

            <li>
                <a href="#"><i class="fa fa-cog fa-fw"></i> Top level 2 (This one stays open)<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level collapse">
                    <li>
                        <a href="#"><i class="fa fa-plus fa-fw"></i> Second level 1<span class="fa arrow"></span></a>
                        <ul class="nav nav-third-level collapse">
                            <li>Third level 1</li>
                            <li>Third level 2</li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-plus fa-fw"></i> Second level 2<span class="fa arrow"></span></a>
                        <ul class="nav nav-third-level collapse">
                            <li>Third level 1</li>
                            <li>Third level 2</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#"><i class="fa fa-cog fa-fw"></i> Top level 3 (this one stays open)<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level collapse">
                    <li>
                        <a href="#"><i class="fa fa-plus fa-fw"></i> Second level 1<span class="fa arrow"></span></a>
                        <ul class="nav nav-third-level collapse">
                            <li>Third level 1</li>
                            <li>Third level 2</li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-plus fa-fw"></i> Second level 2<span class="fa arrow"></span></a>
                        <ul class="nav nav-third-level collapse">
                            <li>Third level 1</li>
                            <li>Third level 2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

我想要实现的是当我第一次加载页面时菜单应该被折叠。当我选择一个子项目时，我希望菜单加载折叠然后打开到正确的项目。目前具有 1 个子级别的顶级菜单项可以正确折叠。第二个和第三个顶层首先折叠（没关系），然后打开（除非选择了子项，否则应该保持关闭）。三级工作正常。实现正确功能的引导折叠类的正确组合是什么？

4

0 回答 0