## 折疊插件 collapse.js
折疊插件（collapse.js）可以很容易地讓頁面區(qū)域折疊起來。當(dāng)列表菜單的條目特別多，而頁面空間有限時，使用類似于手風(fēng)琴的折疊菜單可以節(jié)約頁面空間，方便用戶瀏覽。
**實例**
* `.collapse` 隱藏內(nèi)容
* `.collapsing` 在轉(zhuǎn)換期間應(yīng)用
* `.collapse.in`顯示內(nèi)容
可以使用帶有href屬性的鏈接，或具有數(shù)據(jù)目標(biāo)屬性的按鈕。在這兩種情況下，都需要data-toggle=“collapse”。單擊下面的按鈕以通過類更改顯示和隱藏另一個元素：
```html
<a href="#collapseAnli" class="btn btn-primary" role="button" data-toggle="collapse" aria-controls="collapseAnli">帶href屬性鏈接</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseAnli" aria-controls="collapseAnli">帶有data-target的按鈕</button>
<div class="collapse" id="collapseAnli">
<div class="well">
<p>可以使用帶有href屬性的鏈接，或具有數(shù)據(jù)目標(biāo)屬性的按鈕。在這兩種情況下，都需要data -toggle=“collapse”。單擊下面的按鈕以通過類更改顯示和隱藏另一個元素</p>
</div>
</div>
```
*****
**手風(fēng)琴的折疊菜單**
擴展默認(rèn)折疊行為以創(chuàng)建面板組件一致的折疊。
```html
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-controls="collapseOne" aria-expanded="false">part one</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>折疊插件（collapse.js）可以很容易地讓頁面區(qū)域折疊起來。當(dāng)列表菜單的條目特別多，而頁面空間有限時，使用類似于手風(fēng)琴的折疊菜單可以節(jié)約頁面空間，方便用戶瀏覽。</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-controls="collapseTwo" aria-expanded="false">part Two</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>折疊插件（collapse.js）可以很容易地讓頁面區(qū)域折疊起來。當(dāng)列表菜單的條目特別多，而頁面空間有限時，使用類似于手風(fēng)琴的折疊菜單可以節(jié)約頁面空間，方便用戶瀏覽。</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-controls="collapseThree" aria-expanded="false">part Three</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>折疊插件（collapse.js）可以很容易地讓頁面區(qū)域折疊起來。當(dāng)列表菜單的條目特別多，而頁面空間有限時，使用類似于手風(fēng)琴的折疊菜單可以節(jié)約頁面空間，方便用戶瀏覽。</p>
</div>
</div>
</div>
</div>
```
單擊任意菜單，隱藏內(nèi)容會展開，如果再點擊同一個菜單就會隱藏；在一個菜單展開的情況下，點擊另一個菜單的時候，展開的菜單內(nèi)容就會被隱藏。
注意事項 ：
> 1. 使展開/折疊控件可訪問
請確保將展開的aria添加到控件元素中。此屬性顯式地定義可折疊元素的當(dāng)前狀態(tài)，如果可折疊元素在默認(rèn)情況下是關(guān)閉的，那么它的值應(yīng)該是aria-expanded=“false”。如果您已經(jīng)使用in類將可折疊元素設(shè)置為默認(rèn)打開，請改為在控件上設(shè)置aria-expanded=“true”。插件將根據(jù)可折疊元素是否已打開或關(guān)閉自動切換此屬性。
> 2. 如果控件元素的目標(biāo)是單個可折疊元素，即data-target屬性指向id選擇器，則可以向control元素添加一個附加的aria-controls屬性，其中包含可折疊元素的id。
*****
**使用方法**
**1.** 通過data屬性實現(xiàn)折疊
只需向元素添加data-toggle='collapse'和data-target=''，就可以對隱藏的折疊內(nèi)容進(jìn)行控制（通常在button或a標(biāo)簽上添加這兩個屬性）。data-target 屬性接受一個 CSS 選擇器，并會對其應(yīng)用折疊效果。確保將類collapse添加到可折疊元素中。如果希望它默認(rèn)打開，請在中添加附加類 in。
要將類似accordion的組管理添加到可折疊控件中，請?zhí)砑訑?shù)據(jù)屬性data-parent=“#selector”。
**2.** 通過javascript實現(xiàn)折疊
~~~js
$('.collapse').collapse()
~~~
選項可以通過data屬性或JavaScript傳遞。對于data屬性，將選項名稱附加到data-，如data parent=''。
| 名稱 | 類型 | 默認(rèn)值 | 說明 |
| --- | --- | --- | --- |
| parent | 選擇器 | false | 如果指定了選擇器，則該選擇器指定的父元素下，同一時刻只能顯示一個折疊面板 |
| toggle | boolean | true | 是否切換可折疊元素的狀態(tài) |
*****
**調(diào)用方式**
**1.** 使用選項時，JavaScript調(diào)用折疊插件的格式為：
$(".collapse").collapse(options)
在調(diào)用collapse() 方法時，可以包含一個配置對象，該對象包含 parent 和 toggle 兩個配置參數(shù)。通過以下JavaScript代碼，即可實現(xiàn)折疊插件的交互行為和動態(tài)效果：
```js
$('.collapse').collapse({
parent: "#accordion2"
);
$('.accordion-toggle').click(function() {
$(this).parent().next().collapse('toggle');
});
```
**2.** .collapse('toggle')：讓一個可折疊元素在顯示和隱藏之間切換。
**3.** .collapse('show')：顯示一個可折疊元素。
**4.** .collapse('hide')：隱藏一個可折疊元素。
*****
**折疊插件的事件**
Bootstrap還為折疊組件提供了一組事件，通過這些事件，可以監(jiān)聽用戶的行為及折疊組件的狀態(tài)。
| 事件 | 含義 |
| --- | --- |
| show.bs.collapse | 調(diào)用show方法時，立即觸發(fā)該事件 |
| shown.bs.collapse | 當(dāng)可折疊元素對用戶完全可見（會等待過渡效果執(zhí)行結(jié)束）后，觸發(fā)該事件 |
| hide.bs.collapse | 調(diào)用hide方法時，立即觸發(fā)該事件 |
| hidden.bs.collapse | 當(dāng)可折疊元素對用戶完全不可見（而且過渡效果執(zhí)行完畢）后，觸發(fā)該事件 |
~~~js
$('#myCollapsible').on('hidden.bs.collapse', function () {
alert('內(nèi)容已隱藏')；
})
~~~
- 第一章 . bootstrap介紹
- 第二章 . 全局CSS樣式
- 1、總體注意事項
- 2、柵格系統(tǒng)
- 3、排版
- 4、代碼
- 5、表格
- 6、表單
- 7、 按鈕
- 8、 圖片
- 9、輔助類
- 10、響應(yīng)式工具
- 第三章 . bootstrap相關(guān)CSS應(yīng)用
- 1、CSS媒體查詢 @media
- 2、px,em,rem之間的關(guān)系和換算方式
- 第四章 . 組件
- 1、Glyphicons 字體圖標(biāo)
- 2、下拉菜單
- 3、按鈕組
- 4、按鈕式下拉菜單
- 5、輸入框組
- 6、導(dǎo)航
- 7、導(dǎo)航條
- 8、路徑導(dǎo)航
- 9、分頁
- 10、標(biāo)簽
- 11、徽章
- 12、巨幕
- 13、頁頭
- 14、縮略圖
- 15、警告框
- 16、進(jìn)度條
- 17、媒體對象
- 18、列表組
- 19、面版
- 20、Well
- 第五章 . JavaScript 插件
- 1、JavaScript 插件引入前提
- 2、過渡效果 (transition.js)
- 3、模態(tài)框 （modal.js）
- 4、下拉菜單 （dropdown.js）
- 5、滾動監(jiān)聽 （scrollspy.js）
- 6、可切換標(biāo)簽 （tab.js）
- 7、工具提示 （tooltip.js）
- 8、彈出框 （popover.js）
- 9、警告信息 （alert.js）
- 10、按鈕 （button.js）
- 11、折疊插件（collapse.js）
- 12、輪播插件（carousel.js）
- 13、Affix插件（affix.js）