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 转换完成后) | 测试一下 |