bootstrap侧边伸缩菜单

 

<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");
  });
});