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()
折叠选项
选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称追加到 data-，如 data-parent=""。
| 名称 | 类型 | 默认 | 描述 | 尝试一下 |
|---|---|---|---|---|
| parent | 选择器 | false | 当此折叠项显示时，指定父元素下的所有折叠元素将被关闭。（类似于传统的 **手风琴** 行为） | 尝试一下 |
| toggle | 布尔值 | 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 过渡完成之后） | 尝试一下 |
