Collapse折叠

How it works工作原理

The collapse JavaScript plugin is used to show and hide content. 折叠JavaScript插件用于显示和隐藏内容。Buttons or anchors are used as triggers that are mapped to specific elements you toggle. 按钮或锚定用作触发器，这些触发器映射到您切换的特定元素。Collapsing an element will animate the height from its current value to 0. 折叠一个元素将会把height从它的当前值变为0。Given how CSS handles animations, you cannot use padding on a .collapse element. 给定CSS处理动画的方式，您不能在.collapse元素上使用padding。Instead, use the class as an independent wrapping element.而是应该将该类用作独立的包装元素。

Example例子

Click the buttons below to show and hide another element via class changes:单击下面的按钮，通过类更改显示和隐藏另一个元素：

• .collapse hides content隐藏内容
• .collapsing is applied during transitions在过渡期间应用
• .collapse.show shows content显示内容

Generally, we recommend using a button with the data-bs-target attribute. 通常，我们建议使用带有data-bs-target属性的按钮。While not recommended from a semantic point of view, you can also use a link with the href attribute (and a role="button"). 虽然从语义角度来看不推荐使用，但您也可以使用带有href属性的链接（以及role="button"）。In both cases, the data-bs-toggle="collapse" is required.在这两种情况下，都需要data-bs-toggle="collapse"。

<p>
<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>

Horizontal水平的

The collapse plugin also supports horizontal collapsing. 折叠插件还支持水平折叠。Add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element. 添加.collapse-horizontal修饰符类以转换宽度而不是高度，并在直接子元素上设置宽度。Feel free to write your own custom Sass, use inline styles, or use our width utilities.您可以自由编写自己的自定义Sass、使用内联样式或使用我们的宽度实用程序。

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

Multiple targets多目标

A <button> or <a> can show and hide multiple elements by referencing them with a selector in its href or data-bs-target attribute. 一个<button>或<a>通过在href或data-bs-target属性中使用选择器引用多个元素，可以显示和隐藏多个元素。Multiple <button> or <a> can show and hide an element if they each reference it with their href or data-bs-target attribute多个<button>或<a>如果每个元素都使用href或data-bs-target属性引用某个元素，则可以显示和隐藏该元素

<p>
<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>

Accessibility可访问性

Be sure to add aria-expanded to the control element. 确保将aria-expanded添加到控件元素。This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. 该属性将绑定到控件的可折叠元素的当前状态显式传递给屏幕阅读器和类似的辅助技术。If the collapsible element is closed by default, the attribute on the control element should have a value of aria-expanded="false". 如果可折叠元素在默认情况下关闭，则控件元素上的属性值应为aria-expanded="false"。If you’ve set the collapsible element to be open by default using the show class, set aria-expanded="true" on the control instead. 如果已使用show类将可折叠元素设置为默认打开，请在控件上设置aria-expanded="true"。The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). 插件将根据可折叠元素是否已打开或关闭（通过JavaScript，或者因为用户触发了另一个也绑定到同一可折叠元素的控件元素），在控件上自动切换此属性。If the control element’s HTML element is not a button (e.g., an <a> or <div>), the attribute role="button" should be added to the element.如果控件元素的HTML元素不是按钮（例如<a>或<div>），则应向元素添加role="button"。

If your control element is targeting a single collapsible element – i.e. the data-bs-target attribute is pointing to an id selector – you should add the aria-controls attribute to the control element, containing the id of the collapsible element. 如果控件元素的目标是单个可折叠元素，即data-bs-target属性指向id选择器，则应将aria-controls属性添加到包含可折叠元素id的控件元素中。Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.现代的屏幕阅读器和类似的辅助技术利用这个属性为用户提供额外的快捷方式，以便直接导航到可折叠元素本身。

Note that Bootstrap’s current implementation does not cover the various optional keyboard interactions described in the WAI-ARIA Authoring Practices 1.1 accordion pattern - you will need to include these yourself with custom JavaScript.请注意，Bootstrap的当前实现没有涵盖WAI-ARIA Authoring Practices 1.1手风琴模式中描述的各种可选键盘交互-您需要将这些包含在自定义JavaScript中。

Sass

Variables变量

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Classes类

Collapse transition classes can be found in scss/_transitions.scss as these are shared across multiple components (collapse and accordion).可以在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);
}
}

Usage用法

The collapse plugin utilizes a few classes to handle the heavy lifting:collapse插件利用几个类来处理重载：

• .collapse hides the content隐藏内容
• .collapse.show shows the content显示内容
• .collapsing is added when the transition starts, and removed when it finishes在过渡开始时添加，在过渡结束时删除

These classes can be found in _transitions.scss.这些类可以在_transitions.scss中找到。

Via data attributes通过data属性

Just add data-bs-toggle="collapse" and a data-bs-target to the element to automatically assign control of one or more collapsible elements. 只需添加data-bs-toggle="collapse"以及data-bs-target，用于自动分配对一个或多个可折叠元素的控制。The data-bs-target attribute accepts a CSS selector to apply the collapse to. data-bs-target属性接受CSS选择器以应用折叠。Be sure to add the class collapse to the collapsible element. 确保将类collapse添加到可折叠元素中。If you’d like it to default open, add the additional class show.如果希望它默认打开，请添加额外的类show。

To add accordion-like group management to a collapsible area, add the data attribute data-bs-parent="#selector". 要将类似手风琴的组管理添加到可折叠区域，请添加data属性data-bs-parent="#selector"。Refer to the accordion page for more information.有关更多信息，请参阅手风琴页面。

Via 通过JavaScript

Enable manually with:通过以下方式手动启用：

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})

Options选项

Options can be passed via data attributes or JavaScript. 选项可以通过数据属性或JavaScript传递。For data attributes, append the option name to data-bs-, as in data-bs-parent="".对于数据属性，将选项名称附加到数据data-bs-后面，如data-bs-parent=""。

Methods方法

Activates your content as a collapsible element. 将内容激活为可折叠元素。Accepts an optional options object.接受可选的选项object。

You can create a collapse instance with the constructor, for example:可以使用构造函数创建折叠实例，例如：

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})

Events事件

Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.Bootstrap的collapse类公开了一些事件，用于连接到折叠功能中。

var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})