javascript – Bootstrap可折叠的侧边菜单项

我正在尝试制作一个使子项可折叠的引导程序侧面菜单.

与http://jsfiddle.net/相似
但是我想要子菜单中的链接项而不是这么复杂的结构.

这就是我试过的

<div class="row">
      <!-- Main component for a primary marketing message or call to action -->
        <div class="col-sm-3 col-md-2 sidebar">
           <ul class="nav nav-sidebar">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a>
                <ul class="dropdown-menu">
                <li><a href="#">Blog</a></li>
                <li><a href="#">About US</a></li>
                <li><a href="#">Jobs</a></li>
                </ul>
            </li>
             <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
         </ul>

        </div> 
  </div>

可丢弃的子菜单不会将列表中的其余项目向下推,而是显示在它们的顶部.这使得很难导航.

解决方法

使用面板和折叠插件制作简单的手风琴会不会更好？这是一个展示我的意思的例子.它做我认为你想要的.

<div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
        <ul class="nav nav-sidebar">
            <li>
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapSEOne">
                                    More
                                </a>
                            </h4>
                        </div>
                        <div id="collapSEOne" class="panel-collapse collapse in">
                            <div class="panel-body">
                                <ul>
                                    <li><a href="#">Blog</a></li>
                                    <li><a href="#">About US</a></li>
                                    <li><a href="#">Jobs</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </li>
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
        </ul>
    </div>
</div>