Bootstrap 4 JS 折叠

折叠 CSS 类

有关 Collapsibles 折叠的教程,请阅读我们的 Bootstrap 折叠教程。

描述 例子
.collapse 隐藏内容 测试一下
.collapse show 默认显示可折叠内容 测试一下
.collapsing 过渡开始时添加,结束时删除 测试一下

通过 data-* 属性

只需将 data-toggle="collapse"data-target 添加到元素即可自动分配对可折叠元素的控制。 data-target 属性接受一个 CSS 选择器来应用折叠。请务必将类折叠添加到可折叠元素。如果您希望它默认打开,请添加附加类 "show".

实例

<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()

Collapse 选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性,将选项名称附加到 data-,如 data-parent="".

名称 类型 默认值 描述 试一试
parent selector false 显示此可折叠项时,将关闭指定父项下的所有可折叠元素。 (类似于传统的手风琴行为) 测试一下
toggle boolean true 在调用时切换可折叠元素 测试一下

Collapse 方法

下表列出了所有可用的折叠方法。

方法 描述 试一试
.collapse(options) 使用选项激活可折叠元素。请参阅上面的选项以获取有效值
.collapse("toggle") 切换可折叠元素 测试一下
.collapse("show") 显示可折叠元素 测试一下
.collapse("hide") 隐藏可折叠元素 测试一下
.collapse("dispose") 销毁可折叠元素

Collapse 事件

下表列出了所有可用的折叠事件。

事件 描述 试一试
show.bs.collapse 在即将显示可折叠元素时发生 测试一下
shown.bs.collapse 在可折叠元素完全显示时发生(在 CSS 转换完成后) 测试一下
hide.bs.collapse 当可折叠元素即将被隐藏时发生 测试一下
hidden.bs.collapse 在可折叠元素完全隐藏时发生(在 CSS 转换完成后) 测试一下