Bootstrap JS 摺疊
JS 摺疊 (collapse.js)
獲取摺疊元件（如手風琴和導航）的基礎樣式和靈活支援。
外掛依賴：摺疊元件需要將 transitions 外掛包含在你的 Bootstrap 版本中。
要了解關於摺疊元件的教程，請閱讀我們的 Bootstrap 摺疊教程。
摺疊外掛類
| 類 | 描述 | 示例 |
|---|---|---|
| .collapse | 隱藏內容 | 試一試 |
| .collapse in | 顯示內容 | 試一試 |
| .collapsing | 在過渡開始時新增，在過渡完成時移除 | 試一試 |
透過 data-* 屬性
只需向元素新增 `data-toggle="collapse"` 和 `data-target`，即可自動分配摺疊元素的控制元件。`data-target` 屬性接受一個 CSS 選擇器來應用摺疊效果。確保在摺疊元素上新增 `collapse` 類。如果你希望它預設展開，請新增額外的 `in` 類。
示例
<button class="btn" data-toggle="collapse" data-target="#demo">可摺疊</button>
<div id="demo" class="collapse">
一些文字..
</div>
自己動手試一試 »
提示： 要為摺疊控制元件新增類似手風琴的組管理，請新增 `data-parent="#selector"` 資料屬性。
透過 JavaScript
使用以下命令手動啟用：
$('.collapse').collapse()
摺疊選項
可以透過資料屬性或 JavaScript 傳遞選項。對於資料屬性，將選項名稱附加到 `data-` 後面，例如 `data-parent=""`。
| 名稱 | 型別 | 預設值 | 描述 |
|---|---|---|---|
| parent | selector | false | 當顯示此摺疊項時，指定父項下的所有可摺疊元素都將關閉。（類似於傳統的手風琴行為 - 這取決於 panel 類）- 見下面的示例 |
| 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">
簡單的可摺疊
</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">可摺疊面板</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">面板正文</div>
<div class="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">可摺疊列表組</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">頁尾</div>
</div>
</div>
</div>
自己動手試一試 »
手風琴
以下示例透過擴充套件 panel 元件顯示了一個簡單的手風琴
注意： `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">
可摺疊組 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">
可摺疊組 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">
可摺疊組 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
示例
/* 當可摺疊內容顯示時圖示 */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* 當可摺疊內容隱藏時圖示 */
.btn.collapsed:after {
content: "\e080";
}
自己動手試一試 »
