折叠

使用几个类和我们的 JavaScript 插件在您的项目中切换内容的可见性。

工作原理

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

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

示例

单击下面的按钮通过类更改来显示和隐藏其他元素

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

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

具有 href 的链接

折叠组件的一些占位符内容。此面板默认隐藏，但在用户激活相关触发器时显示。

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-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>

水平

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

请注意，虽然下面的示例设置了 min-height 以避免在我们的文档中进行过度的重新绘制，但这并不是明确需要的。仅需要子元素上的 width。

这是水平折叠的一些占位符内容。它默认隐藏，并在触发时显示。

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

多个目标

一个 <button> 或 <a> 可以通过在其 href 或 data-target 属性中引用它们来显示和隐藏多个元素。多个 <button> 或 <a> 可以显示和隐藏一个元素，如果它们各自通过其 href 或 data-target 属性引用它

切换第一个元素

此多折叠示例的第一个折叠组件的一些占位符内容。此面板默认隐藏，但在用户激活相关触发器时显示。

此多折叠示例的第二个折叠组件的一些占位符内容。此面板默认隐藏，但在用户激活相关触发器时显示。

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-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>

手风琴示例

使用卡片组件，你可以扩展默认折叠行为以创建一个手风琴。为了正确实现手风琴样式，请务必使用 .accordion 作为包装器。

第一个手风琴面板的一些占位符内容。由于 .show 类，此面板默认显示。

第二个手风琴面板的一些占位符内容。此面板默认隐藏。

最后，第三个也是最后一个手风琴面板的占位符内容。此面板默认情况下处于隐藏状态。

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
</div>

辅助功能

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

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

请注意，Bootstrap 的当前实现不涵盖 ARIA 创作实践指南手风琴模式中描述的各种键盘交互 - 您需要使用自定义 JavaScript 自行添加这些交互。

用法

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

.collapse 隐藏内容
.collapse.show 显示内容
当过渡开始时添加 .collapsing，并在过渡结束时将其移除

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

通过数据属性

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

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

通过 JavaScript

使用以下方法手动启用

$('.collapse').collapse()

选项

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

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

方法

异步方法和转换

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

请参阅我们的 JavaScript 文档了解更多信息.

`.collapse(options)`

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

$('#myCollapsible').collapse({
  toggle: false
})

`.collapse('toggle')`

将可折叠元素切换为显示或隐藏。在可折叠元素实际显示或隐藏之前返回给调用者（即在 shown.bs.collapse 或 hidden.bs.collapse 事件发生之前）。

`.collapse('show')`

显示可折叠元素。在可折叠元素实际显示之前返回给调用者（即在 shown.bs.collapse 事件发生之前）。

`.collapse('hide')`

隐藏可折叠元素。在可折叠元素实际隐藏之前返回给调用者（即在 hidden.bs.collapse 事件发生之前）。

`.collapse('dispose')`

销毁元素的折叠。

事件

Bootstrap 的折叠类公开了几个事件，用于连接到折叠功能。

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})

折叠

工作原理

示例

水平

多个目标

手风琴示例

可折叠组项目 #1

可折叠组项目 #2

可折叠组项目 #3

辅助功能

用法

通过数据属性

通过 JavaScript

选项

方法

异步方法和转换

.collapse(options)

.collapse('toggle')

.collapse('show')

.collapse('hide')