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

它是怎么工作的

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

示例

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

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

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

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    href链接
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    带有 data-bs-target 的按钮
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    《冰魄寒光剑》讲述武当派北支掌门之子桂华生在西域的传奇经历和其与华玉公主的爱情故事。
  </div>
</div>

水平的

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

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    切换宽度折叠
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      《冰川天女传》主要讲述的是清乾隆年间朝廷欲护送喇嘛教圣物金本巴瓶至西藏拉萨，江湖各路人物各有目的聚集西藏。从而引出唐经天与冰川天女之间的爱情故事。
    </div>
  </div>
</div>

多个目标

<button> 或 <a> 可以通过在其 href 或 中使用选择器引用多个元素来显示和隐藏多个元素 data-bs-target 属性。 多个 <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">切换第一个元素</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">切换第二个元素</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">切换两个元素</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        《云海玉弓缘》主要讲述了清朝中期，江湖浪子金世遗的传奇经历和与厉胜男、谷之华之间的爱恨情仇故事。
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        《冰河洗剑录》讲述了江南与邹绛霞的孩子江海天的感情和江湖故事。
      </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。 现代屏幕阅读器和类似的辅助技术利用此属性为用户提供额外的快捷方式，以直接导航到可折叠元素本身。

用法

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

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

通过数据属性

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

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

通过 JavaScript

手动启用：

var collapseElementList = Array.prototype.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	如果提供了 parent，则在显示此可折叠项时，将关闭指定父项下的所有可折叠元素。（类似于传统的手风琴行为 - 这取决于 card 类）。 该属性必须在目标可折叠区域上设置。
toggle	boolean	true	在调用时切换可折叠元素

方法

将您的内容激活为可折叠元素。 接受可选选项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.getInstance(element)
getOrCreateInstance	静态方法，它返回与 DOM 元素关联的折叠实例，或者在未初始化的情况下创建一个新实例。你可以像这样使用它：bootstrap.Collapse.getOrCreateInstance(element)

事件

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

事件类型	描述
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...
})