坍塌

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

这个怎么运作

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

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

例子

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

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

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

与href链接

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-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设置 a 。width随意编写您自己的自定义 Sass、使用内联样式或使用我们的宽度实用程序。

请注意，虽然下面的示例有一 min-height组以避免我们的文档中过度重绘，但这并不是明确要求的。 只有widthon 子元素是必需的。

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-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>or可以通过<a>在其hrefordata-target属性中使用 JQuery 选择器引用多个元素来显示和隐藏多个元素。多个<button>or<a>可以显示和隐藏一个元素，如果它们每个都用它们的hrefordata-target属性引用它

切换第一个元素

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-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该类，默认情况下会显示此面板。

Some placeholder content for the second accordion panel. This panel is hidden by default.

And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.

<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"和 adata-target即可自动分配对一个或多个可折叠元素的控制。该data-target属性接受一个 CSS 选择器来应用折叠。确保将类添加collapse到可折叠元素。如果您希望它默认打开，请添加附加类show。

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

通过 JavaScript

手动启用：

$('.collapse').collapse()

选项

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

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

方法

异步方法和转换

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

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

`.collapse(options)`

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

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

`.collapse('toggle')`

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

`.collapse('show')`

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

`.collapse('hide')`

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

`.collapse('dispose')`

破坏元素的折叠。

活动

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

事件类型	描述
show.bs.collapse	`show`调用实例方法时立即触发此事件。
显示.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')