Source

坍塌

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

这个怎么运作

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

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

例子

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

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

您可以使用带有属性的链接href或带有属性的按钮data-target。在这两种情况下，data-toggle="collapse"都是必需的。

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

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.
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-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">
        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>

手风琴示例

使用卡片组件，您可以扩展默认折叠行为以创建手风琴。要正确实现手风琴风格，请务必使用.accordion作为包装。

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid。3 wolf moon officia aute，非 Cupidatat 滑板 dolor 早午餐。食品卡车藜麦 nesciunt labourum eiusmod。早午餐 3 wolf moon tempor，sunt aliqua 在上面放了一只鸟 squid 单一产地咖啡 nulla assumendashoreditch 等。Nihil anim keffiyeh helvetica，精酿啤酒工人韦斯安德森相信 nesciunt sapiente ea proident。Ad vegan excepteur 屠夫 Vice lomo。紧身裤 occaecat 精酿啤酒从农场到餐桌，粗斜纹棉布美学合成器您可能没有听说过它们 accusamus labe 可持续 VHS。

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" 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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link 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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link 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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </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 的当前实现不涵盖WAI-ARIA Authoring Practices 1.1 手风琴模式中描述的各种键盘交互- 您需要自己将这些包含在自定义 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…
})