需求背景：

项目页面需要手风琴组件，这里简单总结一下手风琴组件的使用。

html页面开发：

bootstrap3中可以使用panel加collapse加nav组件实现手风琴。

        <ul class="nav nav-pills nav-stacked">
          <li><a href="#">NAT网关</a></li>
          <li><a href="#">ROUTER网关</a></li>
        </ul>

nav组件实现了手风琴的基本标签页，nav-pills表示使用胶囊式标签页，nav-stacked表示垂直方向堆叠排列。

    <div id="collapseTree" class="panel-collapse collapse in">
      <div class="panel-body">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#">NAT网关</a></li>
          <li><a href="#">ROUTER网关</a></li>
        </ul>
      </div>
    </div>

panel-body把导航标签封装成面板body，再在外面封装一层div让该组件支持折叠：panel-collapse和collapse属性实现了这一功能，in表示该div初始化时时显示的。

    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTree">
      <a class="accordion-toggle" >网关类型</a>
    </div>

panel-heading表示该组件是面板头，表示使用折叠（collapse）的方式实现数据开关，href指向的是collapseTree组件。

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTree">
      <a class="accordion-toggle" >网关类型</a>
    </div>
    <div id="collapseTree" class="panel-collapse collapse in">
      <div class="panel-body">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#">NAT网关</a></li>
          <li><a href="#">ROUTER网关</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

把panel-heading和collapseTree两个div封装成panel，然后再把这个panel封装成panel-group，整个手风琴就做好了。

由于手风琴都在页面的左侧，宽度比较窄，所以可以设置一下css属性：

.container .panel-group{
  margin-bottom: 20px;
  width: 200px;
}

效果展示：

手风琴效果

---

参考资料：

• Bootstrap3手风琴
• bootstrap3 手风琴