Bootstrap4 JS 折叠

折叠 CSS 类

有关可折叠的教程，请阅读我们的Bootstrap 折叠教程。

Class	Description	Example
`.collapse`	Hides the content	尝试一下
`.collapse show`	Shows the collapsible content by default	尝试一下
`.collapsing`	Added when the transition starts, and removed when it finishes	尝试一下

只需添加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"。

手动启用：

$('.collapse').collapse()

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

Name	Type	Default	Description	尝试一下
parent	selector	false	All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)	尝试一下
toggle	boolean	true	Toggles the collapsible element on invocation	尝试一下

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

Method	Description	尝试一下
.collapse(options)	Activates the collapsible element with an option. See options above for valid values
.collapse("toggle")	Toggles the collapsible element	尝试一下
.collapse("show")	Shows the collapsible element	尝试一下
.collapse("hide")	Hides the collapsible element	尝试一下
.collapse("dispose")	Destroys the collapsible element

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

Event	Description	尝试一下
show.bs.collapse	Occurs when the collapsible element is about to be shown	尝试一下
shown.bs.collapse	Occurs when the collapsible element is fully shown (after CSS transitions have completed)	尝试一下
hide.bs.collapse	Occurs when the collapsible element is about to be hidden	尝试一下
hidden.bs.collapse	Occurs when the collapsible element is fully hidden (after CSS transitions have completed)	尝试一下