折叠面板(Collapse)

Bootstrap折叠板插件允许你在网页中用一点点JavaScript以及CSS类切换内容，控制内容的可见性。它是一个灵活的插件，使用少量的类（来自必需的过渡插件），以方便切换行为。

如何运作

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

此组件的动画效果取决于prefers-reduced-motion 媒体查询. 请参阅我们的 辅助功能文档的简化动作部分.

示例

点击下面任何一个按钮，通过类更改显示和隐藏另一个class包含的元素：

• .collapse 隐藏内容
• .collapsing 带动态效果的切换
• .collapse.show 显示内容
  你可以使用带href 属性的连接,、或者带 data-target 属性的按钮来创建折叠效果-这两种情况下 data-toggle="collapse" 属性都是必须的。

<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>或者 <a> 标签上，通过 JQuery选择器来显示和隐藏多个元素（或者多个<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">
        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>

手风琴折叠范例

结合 card 卡片组件使用，可以扩展折叠组件为手风琴效果。

<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，或者因为用户触发的另一个控件元素也绑定到相同的折叠元素）。

此外，如果控件元素只对准一个单个元素——即data-target的值指向一个id选择器，你可以给这个控件元素添加额外的aria-controls属性，容纳这个折叠块元素的id。现代的屏幕阅读器以及类似的辅助技术利用这个属性向用户提供额外的快捷方式，直接导航到折叠块元素本身。

请注意，Bootstrap的当前实现并未涵盖WAI-ARIA Authoring Practices 1.1 accordion pattern手风琴模式中描述的各种键盘交互 - 您需要使用自定义JavaScript自行包含这些交互.

用法

折叠插件使用一些Class类来处理复杂的事务：

• .collapse 隐藏内容
• .collapse.show 显示内容
• .collapsing 在转换开始时被添加，当它完成时则移除。
  这些类可以在_transitions.scss文件中查阅。

利用data数据属性

将 data-toggle="collapse" 和 data-target 添加到元素中，可自动指定折叠面板的控制项，其中 data-target 属性接受CSS选择器，以应用折叠。确保向可折叠面板添加collapse添加到可折叠面板组件之上。如果你希望它默认是打开的，可定义额外的 show属性。

为了给一个折叠块控件添加类似手风琴组的效果，还需要添加data属性data-parent="#selector"。可以参考下面的演示了解实践例子。

利用JavaScript

人为启用它:

$('.collapse').collapse()

选项

可通过data属性或JavaScript传递选项。如用data属性，请把选项名追加到data-后面（如写为data-parent=""）。

方法

异步传输方法和转义

所有的API方法都是 异步传输和轮换， 一旦 事件发生（开始），在结束之前，它们会持续返回给调用者。另外在过渡组件上的方法将被忽略。

请参阅我们的API文档了解更多。

.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提供为折叠面板提供了一系列事件属性。

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