折叠(Collapse)

通过几个类和我们的JavaScript插件，可以在整个项目中切换内容的可见性。

在本页面

怎样工作

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

此组件的动画效果取决于 prefers-reduced-motion 媒体查询。请参阅我们的可访问性文档的简化运动部分。

示例

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

.collapse 隐藏内容
.collapsing在转换期间应用
.collapse.show显示内容

可以使用带有href属性的链接，也可以使用带有data-bs-targett属性的按钮。在这两种情况下，都需要data-bs-toggle="collapse"。

Link with href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<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">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

多个目标

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

Toggle first element

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </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的当前实现并没有涵盖WAI-ARIA Authoring Practices 1.1 accordion pattern模式中描述的各种可选键盘交互-您需要将这些包含在自定义JavaScript中。

用法

collapse插件利用几个类来处理繁重的工作：

.collapse 隐藏内容
.collapse.show 显示内容
.collapsing在过渡开始时添加，在过渡结束时删除

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

通过数据属性

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

要将类似手风琴的组管理添加到可折叠区域，请添加数据属性data-bs-parent="#selector"。请参阅演示以查看此操作。

通过JavaScript

手动启用：

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

选项

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

名称	类型	默认值	描述
`parent`	selector \| jQuery object \| DOM element	`false`	如果提供了父级，则当显示此可折叠项时，指定父级下的所有可折叠元素都将关闭。（类似于传统的手风琴行为-这取决于`card`类别）。必须在目标可折叠区域上设置属性。
`toggle`	boolean	`true`	在调用时切换可折叠元素

方法

异步方法和转换

所有API方法都是异步的，并开始转换。转换一开始就返回到调用方，但在转换结束之前返回。此外，对转换组件的方法调用将被忽略。

有关更多信息，请参阅我们的JavaScript文档。

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

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

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

方法	描述
`toggle`	将可折叠元素切换为显示或隐藏。在实际显示或隐藏可折叠元素之前（即在`shown.bs.collapse` 或 `hidden.bs.collapse`事件发生之前）返回调用者
`show`	显示可折叠元素。在实际显示可折叠元素之前（例如，在`shown.bs.collapse`事件发生之前）返回到调用者。
`hide`	隐藏可折叠的元素。在可折叠元素实际被隐藏之前（例如，在 `hidden.bs.collapse`事件发生之前）返回到调用者。
`dispose`	销毁元素的折叠。（删除DOM元素上存储的数据）
`getInstance`	静态方法，该方法允许您获取与DOM元素关联的折叠实例。

事件

Bootstrap的collapse类公开了一些事件，用于连接到collapse功能。

事件类型	描述
`show.bs.collapse`	调用`show` 实例方法时，此事件立即触发。
`shown.bs.collapse`	当折叠元素对用户可见时（将等待CSS转换完成），将触发此事件。
`hide.bs.collapse`	调用`hide`方法后立即触发此事件。
`hidden.bs.collapse`	当折叠元素对用户隐藏时（将等待CSS转换完成），将触发此事件。

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