1. 概述
上一篇我們講述了折疊插件的用法，可以将任意的div元素包含的内容進行動态的折疊/顯示操作。
本篇來講述折疊中的兩個特例，即折疊面闆、折疊面闆導航。
2. 折疊面闆
折疊面闆是将折疊效果應用于多個面闆，進而在某一時間至多顯示其中一個面闆的控件。
折疊面闆實作稍微有些複雜，接下來我們來較長的描述下：
第1步，我麼定義折疊面闆div元素，并為其命名，需要特别注意panel-group類，表示多個面闆的集合，即我們要建立的折疊面闆。
<div class="panel-group" id="panel-container">
</div>
1
2
第2步，添加第一個面闆的頭部，注意頭部包含折疊按鈕，根據我們對折疊按鈕的了解，當點選折疊按鈕時，id為poem的元素會切換顯示狀态。另外還需要注意使用data-parent屬性關聯到父元素。
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title h4">
<a data-toggle="collapse" data-parent="#panel-container" href="#poem1">春曉</a>
</div>
</div>
</div>
第3步，添加折疊部分，通過panel-collaspse設定面闆，通過collapse in将元素設定為折疊元素且預設顯示(in)。
<div class="panel-group" id="panel-container">
<div class="panel panel-default">
<div id="poem1" class="panel-collapse collapse in">
<div class="panel-body">
春眠不覺曉，處處聞啼鳥。夜來風雨聲，花落知多少。
</div>
</div>
第4步，添加第二個面闆，注意其折疊部分預設不顯示，即不添加in類。
<a data-toggle="collapse" data-parent="#panel-container" href="#poem2">鵝</a>
<div id="poem2" class="panel-collapse collapse">
鵝鵝鵝，曲項向天歌。白毛浮綠水，紅掌撥清波。
</div>
這樣就可以了，具體效果如下：
3. 折疊面闆導航
在折疊面闆中，還有一個比較常用的存在，即折疊面闆的導航。預設情況下菜單可以折疊，當點選時彈出其子菜單。
隻需要将panel-body部分替換為list-group清單組即可。
<div class="panel-group" id="main-menu">
<a data-toggle="collapse" data-parent="#main-menu" href="#menu1">菜單1</a>
<div id="menu1" class="panel-collapse collapse in">
<ul class="list-group">
<li class="list-group-item">菜單1-1</li>
<li class="list-group-item">菜單1-2</li>
</ul>
<a data-toggle="collapse" data-parent="#main-menu" href="#menu2">菜單2</a>
<div id="menu2" class="panel-collapse collapse">
<li class="list-group-item">菜單2-1</li>
<li class="list-group-item">菜單2-2</li>
具體效果如下：
4. 小結
折疊面闆、折疊面闆導航綜合之前折疊插件、面闆插件、清單組相關的技術，還是比較難的。
但是其實大家無需死記硬背，再使用時臨時上網查詢其用法即可，拿來修改即用。