坍塌

怎么运行的

¥How it works

折叠 JavaScript 插件用于显示和隐藏内容。按钮或锚点用作触发器，映射到你切换的特定元素。折叠元素将使 height 从当前值动画到 0。鉴于 CSS 处理动画的方式，你不能在 .collapse 元素上使用 padding。相反，使用类作为独立的封装元素。

¥The collapse JavaScript plugin is used to show and hide content. 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. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.

示例

¥Example

单击下面的按钮可通过类更改显示和隐藏另一个元素：

¥Click the buttons below to show and hide another element via class changes:

• .collapse 隐藏内容

  ¥.collapse hides content

• .collapsing 在转换期间应用

  ¥.collapsing is applied during transitions

• .collapse.show 显示内容

  ¥.collapse.show shows content

通常，我们建议使用具有 data-bs-target 属性的 <button>。虽然从语义角度不建议这样做，但你也可以使用带有 href 属性（和 role="button"）的 <a> 链接。在这两种情况下，都需要 data-bs-toggle="collapse"。

¥Generally, we recommend using a <button> with the data-bs-target attribute. While not recommended from a semantic point of view, you can also use an <a> link with the href attribute (and a role="button"). In both cases, the data-bs-toggle="collapse" is required.

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

水平的

¥Horizontal

折叠插件支持水平折叠。添加 .collapse-horizontal 修饰符类以转换 width 而不是 height，并在直接子元素上设置 width。请随意编写你自己的自定义 Sass、使用内联样式或使用我们的宽度实用程序。

¥The collapse plugin 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. Feel free to write your own custom Sass, use inline styles, or use our width utilities.

<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 toggles and targets

<button> 或 <a> 元素可以通过使用其 data-bs-target 或 href 属性中的选择器引用多个元素来显示和隐藏多个元素。相反，如果多个 <button> 或 <a> 元素各自使用 data-bs-target 或 href 属性引用该元素，则它们可以显示和隐藏同一元素。

¥A <button> or <a> element can show and hide multiple elements by referencing them with a selector in its data-bs-target or href attribute. Conversely, multiple <button> or <a> elements can show and hide the same element if they each reference it with their data-bs-target or href attribute.

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

无障碍

¥Accessibility

请务必将 aria-expanded 添加到控制元素。此属性明确传达与屏幕阅读器和类似辅助技术的控件相关的可折叠元素的当前状态。如果可折叠元素默认关闭，则控制元素上的属性应具有 aria-expanded="false" 值。如果你已使用 show 类将可折叠元素设置为默认打开，请改为在控件上设置 aria-expanded="true"。该插件将根据可折叠元素是否已打开或关闭（通过 JavaScript，或者因为用户触发了也绑定到同一可折叠元素的另一个控制元素）来自动切换控件上的此属性。如果控制元素的 HTML 元素不是按钮（例如 <a> 或 <div>），则应将属性 role="button" 添加到该元素。

¥Be sure to add aria-expanded to the control element. 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". If you’ve set the collapsible element to be open by default using the show class, set aria-expanded="true" on the control instead. 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). 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.

如果你的控制元素针对单个可折叠元素（即 data-bs-target 属性指向 id 选择器），则应将 aria-controls 属性添加到控制元素，其中包含可折叠元素的 id。现代屏幕阅读器和类似的辅助技术利用此属性为用户提供直接导航到可折叠元素本身的附加快捷方式。

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

请注意，Bootstrap 当前的实现不涵盖 ARIA 创作实践指南手风琴模式 中描述的各种可选键盘交互 - 你需要自己使用自定义 JavaScript 包含这些内容。

¥Note that Bootstrap’s current implementation does not cover the various optional keyboard interactions described in the ARIA Authoring Practices Guide accordion pattern - you will need to include these yourself with custom JavaScript.

CSS

Sass 变量

¥Sass variables

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

类

¥Classes

折叠转场类可以在 scss/_transitions.scss 中找到，因为它们在多个组件（折叠和折叠）之间共享。

¥Collapse transition classes can be found in scss/_transitions.scss as these are shared across multiple components (collapse and accordion).

.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 显示内容

  ¥.collapse.show shows the content

• .collapsing 在转换开始时添加，并在转换完成时删除

  ¥.collapsing is added when the transition starts, and removed when it finishes

这些类可以在 _transitions.scss 中找到。

¥These classes can be found in _transitions.scss.

通过数据属性

¥Via data attributes

只需向元素添加 data-bs-toggle="collapse" 和 data-bs-target 即可自动分配对一个或多个可折叠元素的控制。data-bs-target 属性接受要应用折叠的 CSS 选择器。确保将 collapse 类添加到可折叠元素中。如果你希望它默认打开，请添加附加类 show。

¥Just add data-bs-toggle="collapse" and a data-bs-target to the element to automatically assign control of one or more collapsible elements. The data-bs-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you’d like it to default open, add the additional class show.

要将类似手风琴的组管理添加到可折叠区域，请添加数据属性 data-bs-parent="#selector"。请参阅手风琴页面 了解更多信息。

¥To add accordion-like group management to a collapsible area, add the data attribute data-bs-parent="#selector". Refer to the accordion page for more information.

通过 JavaScript

¥Via JavaScript

手动启用：

¥Enable manually with:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

选项

¥Options

As options can be passed via data attributes or JavaScript, you can append an option name to data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".

As of Bootstrap 5.2.0, all components support an experimental reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.

The final configuration object is the merged result of data-bs-config, data-bs-, and js object where the latest given key-value overrides the others.

方法

¥Methods

将你的内容激活为可折叠元素。接受可选选项 object。

¥Activates your content as a collapsible element. Accepts an optional options object.

你可以使用构造函数创建折叠实例，例如：

¥You can create a collapse instance with the constructor, for example:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

活动

¥Events

Bootstrap 的折叠类公开了一些用于钩子折叠功能的事件。

¥Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})