使用一些类和我们的 JavaScript 插件在整个项目中切换内容的可见性。
运作方式
collapse JavaScript 插件用于显示和隐藏内容。按钮或锚点用作映射到切换的特定元素的触发器。折叠元素会将 从其当前值动画化为 。鉴于 CSS 处理动画的方式，您不能在元素上使用 。相反，请将类用作独立的包装元素。height0padding.collapse
此组件的动画效果取决于媒体查询。请参阅我们辅助功能文档的减少运动部分。prefers-reduced-motion
例
单击下面的按钮可通过类更改显示和隐藏另一个元素：
.collapse隐藏内容.collapsing在过渡期间应用.collapse.show显示内容
通常，我们建议将 a 与属性一起使用。虽然从语义的角度来看不建议使用，但您也可以使用带有属性（和 ）。在这两种情况下，都是必需的。<button>data-bs-target<a>hrefrole="button"data-bs-toggle="collapse"
<p class="d-inline-flex gap-1">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>水平
collapse 插件支持水平折叠。添加修饰符类以转换 instead of 并在直接子元素上设置 a。请随意编写您自己的自定义 Sass，使用内联样式或使用我们的宽度实用程序。.collapse-horizontalwidthheightwidth
请注意，虽然下面的示例在我们的文档中有一个避免过度重绘的集合，但这并不是明确要求的。只需要子元素上的宽度。min-height
<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
This is some placeholder content for a horizontal collapse. It’s hidden by default and shown when triggered.
</div>
</div>
</div>多个切换和目标
或元素可以通过在其 or 属性中使用选择器引用多个元素来显示和隐藏多个元素。相反，如果多个 or 元素都使用其 or 属性引用同一元素，则可以显示和隐藏同一元素。<button><a>data-bs-targethref<button><a>data-bs-targethref
<p class="d-inline-flex gap-1">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>可及性
请务必添加到控件元素。此属性将与控件绑定的可折叠元素的当前状态显式传达给屏幕阅读器和类似的辅助技术。如果默认情况下可折叠元素是关闭的，则控件元素上的属性的值应为 。如果您已使用类将可折叠元素设置为默认打开，请改为在控件上设置。插件将根据可折叠元素是否已打开或关闭（通过 JavaScript，或者因为用户触发了另一个也绑定到同一可折叠元素的控件元素）自动在控件上切换此属性。如果控件元素的 HTML 元素不是按钮（例如，或），则应将该属性添加到元素中。aria-expandedaria-expanded="false"showaria-expanded="true"<a><div>role="button"
如果控件元素面向单个可折叠元素（即属性指向选择器），则应将该属性添加到控件元素，其中包含可折叠元素的 。现代屏幕阅读器和类似的辅助技术利用此属性为用户提供额外的快捷方式，以直接导航到可折叠元素本身。data-bs-targetidaria-controlsid
请注意，Bootstrap 的当前实现并未涵盖 ARIA 创作实践指南手风琴模式中描述的各种可选键盘交互 – 您需要自己使用自定义 JavaScript 包含这些交互。
CSS系统
Sass 变量
$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
类
折叠过渡类可以在中找到，因为它们在多个组件（折叠和手风琴）之间共享。scss/_transitions.scss
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
&.collapse-horizontal {
width: 0;
height: auto;
@include transition($transition-collapse-width);
}
}
用法
collapse 插件利用几个类来处理繁重的工作：
.collapse隐藏内容.collapse.show显示内容.collapsing在过渡开始时添加，并在过渡完成时删除
这些类可以在 中找到。_transitions.scss
通过数据属性
只需在元素中添加 和 a 即可自动分配对一个或多个可折叠元素的控制权。该属性接受要应用折叠的 CSS 选择器。请务必将类添加到可折叠元素中。如果您希望它默认打开，请添加其他类。data-bs-toggle="collapse"data-bs-targetdata-bs-targetcollapseshow
要将类似手风琴的组管理添加到可折叠区域，请添加 data 属性 。有关更多信息，请参阅手风琴页面。data-bs-parent="#selector"
通过 JavaScript
使用以下命令手动启用：
const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))
选项
由于选项可以通过数据属性或 JavaScript 传递，因此您可以将选项名称附加到 ，如 。通过数据属性传递选项时，请确保将选项名称的大小写类型从“camelCase”更改为“kebab-case”。例如，使用 代替 。data-bs-data-bs-animation="{value}"data-bs-custom-class="beautifier"data-bs-customClass="beautifier"
从 Bootstrap 5.2.0 开始，所有组件都支持实验性保留数据属性，该属性可以将简单的组件配置作为 JSON 字符串容纳。当元素具有 和 属性时，最终值将是 ，并且单独的数据属性将覆盖 上给出的值。此外，现有数据属性能够容纳 JSON 值，例如 .data-bs-configdata-bs-config='{"delay":0, "title":123}'data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'
最终配置对象是 、 的合并结果，其中最新给定的键值覆盖其他键值。data-bs-configdata-bs-js object
| 名字 | 类型 | 违约 | 描述 |
|---|---|---|---|
parent | selector， DOM 元素 | null | 如果提供了parent，则在显示此可折叠项时，指定父项下的所有可折叠元素都将关闭。（类似于传统的手风琴行为 – 这取决于类）。必须在目标可折叠区域上设置该属性。card |
toggle | 布尔 | true | 在调用时切换可折叠元素。 |
方法
所有 API 方法都是异步的，并启动转换。它们在转换开始后立即返回给调用方，但在转换结束之前。此外，对转换组件的方法调用将被忽略。在我们的 JavaScript 文档中了解更多信息。
将内容激活为可折叠元素。接受可选选项。object
您可以使用构造函数创建折叠实例，例如：
const bsCollapse = new bootstrap.Collapse('#myCollapse', {
toggle: false
})
| 方法 | 描述 |
|---|---|
dispose | 销毁元素的塌陷。（删除 DOM 元素上存储的数据） |
getInstance | static 方法，它允许您获取与 DOM 元素关联的折叠实例，您可以像这样使用它： 。bootstrap.Collapse.getInstance(element) |
getOrCreateInstance | 静态方法，返回与 DOM 元素关联的折叠实例，或创建一个新实例，以防它未初始化。你可以这样使用它： .bootstrap.Collapse.getOrCreateInstance(element) |
hide | 隐藏可折叠元素。在可折叠元素实际隐藏之前（例如，在事件发生之前）返回给调用者。hidden.bs.collapse |
show | 显示可折叠元素。在可折叠元素实际显示之前（例如，在事件发生之前）返回给调用者。shown.bs.collapse |
toggle | 将可折叠元素切换为显示或隐藏。在可折叠元素实际显示或隐藏之前（即在 or 事件发生之前）返回给调用方。shown.bs.collapsehidden.bs.collapse |
事件
Bootstrap 的 collapse 类公开了一些用于挂接到 collapse 功能的事件。
| 事件类型 | 描述 |
|---|---|
hide.bs.collapse | 调用该方法后，会立即触发此事件。hide |
hidden.bs.collapse | 当对用户隐藏折叠元素时，将触发此事件（将等待 CSS 转换完成）。 |
show.bs.collapse | 调用实例方法时，此事件会立即触发。show |
shown.bs.collapse | 当折叠元素对用户可见时，将触发此事件（将等待 CSS 转换完成）。 |
const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
// do something...
})