Bootstrap 4 JS 摺疊
摺疊 CSS 類
關於摺疊元件的教程，請閱讀我們的 Bootstrap 摺疊教程。
| 類 | 描述 | 示例 |
|---|---|---|
.collapse |
隱藏內容 | 試一試 |
.collapse show |
預設顯示可摺疊內容 | 試一試 |
.collapsing |
在過渡開始時新增，在過渡完成時移除 | 試一試 |
透過 data-* 屬性
只需將 data-toggle="collapse" 和 data-target 新增到元素上，即可自動分配對可摺疊元素的控制。data-target 屬性接受一個 CSS 選擇器來應用摺疊。確保將 collapse 類新增到可摺疊元素。如果你希望它預設開啟，請新增額外的類 "show"。
示例
<button class="btn" data-toggle="collapse" data-target="#demo">可摺疊</button>
<div id="demo" class="collapse">
一些文字..
</div>
自己動手試一試 »
提示：要為可摺疊控制元件新增類似手風琴的分組管理，請新增 data-parent="#selector" 資料屬性。
透過 JavaScript
使用以下命令手動啟用：
$('.collapse').collapse()
摺疊選項
可以透過 data 屬性或 JavaScript 傳遞選項。對於 data 屬性，將選項名稱附加到 data-，例如 data-parent="".
| 名稱 | 型別 | 預設值 | 描述 | 試一試 |
|---|---|---|---|---|
| parent | selector | false | 顯示此可摺疊項時，指定父項下的所有可摺疊項都將關閉。（類似於傳統 **手風琴** 行為） | 試一試 |
| toggle | boolean | true | 在呼叫時切換可摺疊元素 | 試一試 |
摺疊方法
下表列出了所有可用的摺疊方法。
| 方法 | 描述 | 試一試 |
|---|---|---|
| .collapse(options) | 使用選項啟用可摺疊元素。有關有效值，請參閱上面的選項 | |
| .collapse("toggle") | 切換可摺疊元素 | 試一試 |
| .collapse("show") | 顯示可摺疊元素 | 試一試 |
| .collapse("hide") | 隱藏可摺疊元素 | 試一試 |
| .collapse("dispose") | 銷燬可摺疊元素 |
摺疊事件
下表列出了所有可用的摺疊事件。
| 事件 | 描述 | 試一試 |
|---|---|---|
| show.bs.collapse | 當可摺疊元素即將顯示時發生 | 試一試 |
| shown.bs.collapse | 當可摺疊元素完全顯示時發生（CSS 過渡完成後） | 試一試 |
| hide.bs.collapse | 當可摺疊元素即將隱藏時發生 | 試一試 |
| hidden.bs.collapse | 當可摺疊元素完全隱藏時發生（CSS 過渡完成後） | 試一試 |
