<div class="panel-group table-responsive classify" role="tablist">
<div class="panel panel-primary leftMenu">
<!-- 利用data-target指定要折叠的分组列表 -->
<div class="panel-heading" id="collapseListGroupHeading1" data-toggle="collapse"
data-target="#collapseListGroup1" role="tab">
<h4 class="panel-title">
技术类
<span class="glyphicon glyphicon-chevron-up right"></span>
</h4>
</div>
<!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
<div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel"
aria-labelledby="collapseListGroupHeading1">
<ul class="list-group">
<li class="list-group-item">
<a href="#">HTML5</a>
</li>
<li class="list-group-item">
<a href="">CSS</a>
</li>
<li class="list-group-item">
<a href="">JavaScript</a>
</li>
<li class="list-group-item">
<a href="">Vue.js</a>
</li>
<li class="list-group-item">
<a href="">Django</a>
</li>
<li class="list-group-item">
<a href="">MySql</a>
</li>
<li class="list-group-item">
<a href="">Python</a>
</li>
<li class="list-group-item">
<a href="">Java</a>
</li>
</ul>
</div>
</div><!--panel end-->
<div class="panel panel-primary leftMenu">
<div class="panel-heading" id="collapseListGroupHeading2" data-toggle="collapse"
data-target="#collapseListGroup2" role="tab">
<h4 class="panel-title">
其他类
<span class="glyphicon glyphicon-chevron-down right"></span>
</h4>
</div>
<div id="collapseListGroup2" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="collapseListGroupHeading2">
<ul class="list-group">
<li class="list-group-item">
<a href="">感悟</a>
</li>
<li class="list-group-item">
<a href="">游记</a>
</li>
<li class="list-group-item">
<a href="">日记</a>
</li>
</ul>
</div>
</div>
</div>
要记得配上jquery
$(function () {
$(".panel-heading").click(function (e) {
/*切换折叠指示图标*/
$(this).find("span").toggleClass("glyphicon-chevron-down");
$(this).find("span").toggleClass("glyphicon-chevron-up");
});
});