需求背景：
項目頁面需要手風琴組件，這里簡單總結一下手風琴組件的使用悯辙。
html頁面開發(fā)：
bootstrap3中可以使用panel加collapse加nav組件實現(xiàn)手風琴。
<ul class="nav nav-pills nav-stacked">
<li><a href="#">NAT網(wǎng)關</a></li>
<li><a href="#">ROUTER網(wǎng)關</a></li>
</ul>
nav組件實現(xiàn)了手風琴的基本標簽頁，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網(wǎng)關</a></li>
<li><a href="#">ROUTER網(wǎng)關</a></li>
</ul>
</div>
</div>
panel-body把導航標簽封裝成面板body，再在外面封裝一層div讓該組件支持折疊：panel-collapse和collapse屬性實現(xiàn)了這一功能茴肥，in表示該div初始化時時顯示的坚踩。
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTree">
<a class="accordion-toggle" >網(wǎng)關類型</a>
</div>
panel-heading表示該組件是面板頭，表示使用折疊（collapse）的方式實現(xiàn)數(shù)據(jù)開關瓤狐，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" >網(wǎng)關類型</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網(wǎng)關</a></li>
<li><a href="#">ROUTER網(wǎng)關</a></li>
</ul>
</div>
</div>
</div>
</div>
把panel-heading和collapseTree兩個div封裝成panel，然后再把這個panel封裝成panel-group础锐，整個手風琴就做好了嗓节。
由于手風琴都在頁面的左側，寬度比較窄皆警，所以可以設置一下css屬性：
.container .panel-group{
margin-bottom: 20px;
width: 200px;
}
效果展示：
手風琴效果
