對為支持折疊功能的組件，例如 accordions 和導航，賦予基本樣式和靈活的支持。

• 插件依賴
• 折疊插件依賴過渡效果插件。

案例

使用折疊插件，通過擴展 panel 組件從而構建了一個簡單的 accordion 組件。

先來看一下效果。

http://wiki.jikexueyuan.com/project/bootstrap/images/bt7.gif" alt="" />

接下來看一下代碼的實現(xiàn)。

<div class="container" style="margin-top:140px;">
     <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
          <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
          <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
          <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
        </div>
      </div>
    </div>
 </div>

• 第一步：首先最外面那層 panel-group 這層下面包括幾個小組。
• 第二步：看一下幾個簡單的組

<div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
      </div>
    </div>
</div>

通過代碼也比較清楚的可以看出一個 panel 的結構。

panel-header 和 pandl-body，然后 panel-header 里面可以包含標題，鏈接。通過鏈接和 panel-body 相連。

• 第三步：你可以發(fā)現(xiàn)在 panel-group 中有一個 id="accordion"，然后下面每個標題下鏈接中有個data-parent="#accordion"。

如果去掉的話，那么效果就是點擊其他鏈接后，原來的 panel 并不會再縮起來了。

你可以通過另一個方式來展示折疊的效果。

<div class="container" style="margin-top:140px;">
 <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo"> simple collapsible </button>

<div id="demo" class="collapse in">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>

http://wiki.jikexueyuan.com/project/bootstrap/images/bt8.gif" alt="" />

用法

折疊插件通過幾個簡單的類來控制樣式

• .collapse 隱藏內(nèi)容
• .collapse in 顯示內(nèi)容
• .collapsing。 折疊被添加后過渡效果就有了，然后如果被移除了它就結束了。

通過 data 屬性

僅僅通過向頁面元素添加data-toggle="collapse" 和data-target就可以為其賦予控制可折疊頁面元素的能力。data-target屬性接受一個CSS選擇器作為其控制對象。請確保為可折疊頁面元素添加collapse class。如果你希望可折疊頁面元素的默認狀態(tài)是展開的，請?zhí)砑觟n class。

為了給一組可折疊頁面元素添加控制器，添加 data-parent="#selector" 即可。請參考上面的例子即可。

通過 JavaScript

<button type="button" class="btn btn-danger" onClick="Open()">打開</button>
<button type="button" class="btn btn-danger" onClick="Hide()">折疊</button>

<div id="demo" class="collapse in">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> <div class="panel-group" id="accordion" style="margin-top:240px;">

<script type="text/javascript"> $(function(){
         $("#demo").collapse({
    toggle: false })
        }) 
     function Open(){
        $("#demo").collapse("show");
        }
    function Hide(){
        $("#demo").collapse("hide");
        } </script>

來看一下上面的效果

http://wiki.jikexueyuan.com/project/bootstrap/images/bt9.gif" alt="" />

方法

賦予頁面元素可折疊功能。接受一個可選的 object 作為參數(shù)。

$("#demo").collapse({toggle: false})

這樣元素在初始化的時候會是展開的。

1. collapse('toggle')展示或隱藏一個可折疊的頁面元素。
2. collapse('show')展示一個可折疊頁面元素。
3. collapse('hide')隱藏一個可折疊頁面元素。

事件

Bootstrap 中的折疊插件對外暴露了一組可以監(jiān)聽的事件。

http://wiki.jikexueyuan.com/project/bootstrap/images/bt12.png" alt="" />

$('#demo').on('hidden.bs.collapse', function () {
          alert(1);
    })

這樣就為元素綁定了隱藏時的事件。