JS Collapse (collapse.js)
獲得基本樣式和像手風琴和導航可折疊組件靈活的支持。
插件的依賴：收起要求轉換插件包含在你的引導版本。
對於有關Collapsibles教程，請閱讀我們Bootstrap Collapse教程 。
The Collapse Plugin Classes
通過data-*屬性
只需添加data-toggle="collapse"和一個數據目標元素自動分配一個可折疊元素的控制權。 數據-target屬性接受一個CSS選擇器崩潰申請。 請務必將崩潰類添加到可折疊的元素。 如果你想它默認打開，添加在附加類。
例
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
試一試» 提示：要手風琴狀組管理添加到一個可折疊的控制，添加數據屬性data-parent="#selector" 。
通過JavaScript
與手動啟用：
$('.collapse').collapse()折疊選項
選項可以通過數據屬性或JavaScript進行傳遞。 對於數據屬性，選項名稱追加到數據-如在data-parent=""
| 名稱 | 類型 | 默認 | 描述 |
|---|---|---|---|
| parent | selector | false | 時顯示該可折疊項目指定的父下的所有元素折疊將被關閉。 （類似傳統手風琴的行為 - 這是依賴於面板類） - 參見下面的例子 |
| toggle | boolean | true | 切換上調用可折疊元素 |
折疊方法
下表列出了所有可用的合攏方式。
| 方法 | 描述 | 嘗試一下 |
|---|---|---|
| .collapse( options ) | 激活一個選項可折疊元素。 見上面的有效值選項 | |
| .collapse("toggle") | 切換可折疊元素 | 嘗試一下 |
| .collapse("show") | 顯示可折疊元素 | 嘗試一下 |
| .collapse("hide") | 隱藏可折疊元素 | 嘗試一下 |
坍塌事件
下表列出了所有可用的坍塌事件。
| 事件 | 描述 | 嘗試一下 |
|---|---|---|
| show.bs.collapse | 當可折疊元件將要被示出發生 | 嘗試一下 |
| shown.bs.collapse | 發生時，盡顯可折疊元素（CSS後過渡已經完成） | 嘗試一下 |
| hide.bs.collapse | 當可折疊元件是要隱藏發生 | 嘗試一下 |
| hidden.bs.collapse | 當可折疊的元素隱藏完全發生（後CSS過渡已經完成） | 嘗試一下 |
例子
簡單可折疊
下面的示例使按鈕切換另一個元素的展開和折疊的內容：
例
<button type="button" class="btn btn-info" data-toggle="collapse"
data-target="#demo">
Simple collapsible
</button>
<div id="demo"
class="collapse in">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div> 試一試» 可折疊面板
下面的例子顯示了一個可折疊的面板：
例
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1"
class="panel-collapse collapse">
<div
class="panel-body">Panel Body</div>
<div
class="panel-footer">Panel Footer</div>
</div>
</div>
</div> 試一試» 可折疊列表組
以下示出了具有內部列表組一個可折疊的面板：
例
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1"
class="panel-collapse collapse">
<ul
class="list-group">
<li
class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div> 試一試» 手風琴
下面的示例演示通過擴展面板組件的簡單手風琴：
注： data-parent屬性可確保當顯示的可折疊項目之一指定的父下的所有元素可折疊將被關閉。
例
<div class="panel-group" id="accordion">
<div class="panel
panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible
Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse
collapse in">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible
Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse
collapse">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible
Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse
collapse">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div> 試一試» 展開和折疊切換圖標和文字
下面的例子中打開和關閉所述可折疊內容時改變開/關的文本和圖標：
例
$(document).ready(function(){
$("#demo").on("hide.bs.collapse",
function(){
$(".btn").html('<span class="glyphicon
glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span
class="glyphicon glyphicon-collapse-up"></span> Close');
});
}); 試一試» 或者你可以使用CSS：
例
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content
is hidden */
.btn.collapsed:after {
content: "\e080";
} 試一試»