Skip to main content Skip to docs navigation

折叠面板

使用一些类和我们的 JavaScript 插件来切换项目中内容的可见性。

怎么运行的

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

该组件的动画效果依赖于prefers-reduced-motion媒体查询。请参阅我们的辅助功能文档的减少运动部分

例子

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

  • .collapse隐藏内容
  • .collapsing在过渡期间应用
  • .collapse.show显示内容

通常,我们建议使用<button>带有data-bs-target属性的。虽然从语义的角度不推荐,但您也可以使用<a>带有href属性(和role="button")的链接。在这两种情况下,data-bs-toggle="collapse"都是必需的。

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
网页格式
<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>

水平的

折叠插件支持水平折叠。添加.collapse-horizontal修饰符类以过渡 the widthinstead of并在直接子元素上height设置 a 。width随意编写您自己的自定义 Sass、使用内联样式或使用我们的宽度实用程序

请注意,虽然下面的示例min-height在我们的文档中设置了避免过度重绘的设置,但这并不是明确要求的。只有width子元素上的 是必需的。

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
网页格式
<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>

多个切换和目标

<button>or元素可以通过在其or属性<a>中使用选择器来引用它们来显示和隐藏多个元素。相反,多个or元素可以显示和隐藏同一个元素,如果它们每个都使用它们的or属性引用它。data-bs-targethref<button><a>data-bs-targethref

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.
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.
网页格式
<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>

辅助功能

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

如果您的控制元素以单个可折叠元素为目标——即data-bs-target属性指向一个id选择器——您应该将aria-controls属性添加到控制元素,包含id可折叠元素的 。现代屏幕阅读器和类似的辅助技术利用此属性为用户提供额外的快捷方式以直接导航到可折叠元素本身。

请注意,Bootstrap 的当前实现不涵盖ARIA 创作实践指南手风琴模式中描述的各种可选键盘交互- 您需要自己将这些与自定义 JavaScript 包含在一起。

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 插件利用几个类来处理繁重的工作:

这些类可以在_transitions.scss.

通过数据属性

只需向元素添加data-bs-toggle="collapse"和 adata-bs-target即可自动分配对一个或多个可折叠元素的控制。该data-bs-target属性接受一个 CSS 选择器来应用折叠。请务必将类添加collapse到可折叠元素。如果您希望它默认打开,请添加额外的类show

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

通过 JavaScript

手动启用:

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

选项

由于可以通过数据属性或 JavaScript 传递选项,因此您可以将选项名称附加到data-bs-,如data-bs-animation="{value}". 当通过数据属性传递选项时,确保将选项名称的大小写类型从“ camelCase ”更改为“ kebab-case ”。例如,使用data-bs-custom-class="beautifier"而不是data-bs-customClass="beautifier"

从 Bootstrap 5.2.0 开始,所有组件都支持实验性保留数据属性data-bs-config,该属性可以将简单的组件配置作为 JSON 字符串进行存储。当元素具有data-bs-config='{"delay":0, "title":123}'data-bs-title="456"属性时,最终title值将是456并且单独的数据属性将覆盖 上给出的值data-bs-config。此外,现有的数据属性能够容纳 JSON 值,例如data-bs-delay='{"show":0,"hide":150}'.

名称 类型 默认 描述
parent 选择器,DOM 元素 null 如果提供了 parent,则当显示此可折叠项目时,指定父级下的所有可折叠元素都将关闭。(类似于传统的手风琴行为——这取决于card类)。必须在目标可折叠区域上设置该属性。
toggle 布尔值 true 在调用时切换可折叠元素。

方法

异步方法和转换

所有 API 方法都是异步的并开始一个转换它们会在转换开始但结束之前立即返回给调用者。此外,将忽略对转换组件的方法调用。

有关详细信息,请参阅我们的 JavaScript 文档

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

您可以使用构造函数创建一个折叠实例,例如:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})
方法 描述
dispose 破坏元素的折叠。(删除存储在 DOM 元素上的数据)
getInstance 允许您获取与 DOM 元素关联的折叠实例的静态方法,您可以像这样使用它bootstrap.Collapse.getInstance(element)
getOrCreateInstance 返回与 DOM 元素关联的折叠实例的静态方法,或者在未初始化的情况下创建一个新实例。你可以像这样使用它bootstrap.Collapse.getOrCreateInstance(element)
hide 隐藏可折叠元素。在可折叠元素实际隐藏之前(例如,在事件发生之前)返回给调用者。hidden.bs.collapse
show 显示可折叠元素。在实际显示可折叠元素之前(例如,在事件发生之前)返回给调用者。shown.bs.collapse
toggle 将可折叠元素切换为显示或隐藏。在可折叠元素实际显示或隐藏之前返回给调用者(即在shown.bs.collapseorhidden.bs.collapse事件发生之前)。

事件

Bootstrap 的 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...
})