bootrstrap侧菜单三级崩溃

Question

我正在使用SB Admin bootstrap主题，我在正确折叠左侧菜单方面遇到了问题。

<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个子级正确折叠。第二个和第三个顶级首次崩溃（可以）然后打开（除非选择子项，否则应保持关闭状态）。第三级工作正常。启动崩溃类的正确组合是什么才能实现正确的功能？