Bootstrap 可折叠侧边菜单项

Question

我正在尝试制作一个引导侧边菜单，使子项目可折叠。

类似于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>

可下拉的子菜单不会将列表中的其余项目向下推，而是显示在它们的顶部。这使得导航变得困难。

Answer 1

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

<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>