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 过渡完成后） | 试一试 |
