我正在尝试制作一个使子项可折叠的引导程序侧面菜单.
与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>
