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>
上一篇: Bootstrap collapsible side menu items
下一篇: The username is not provided. Specify username in ClientCredentials