折叠板

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

示例

点击下面的按钮，利用类的改变，显示或隐藏另一个元素：

• .collapse 隐藏内容
• .collapsing 在过渡过程中应用到
• .collapse.in 显示内容

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

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" 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">
  <div class="card card-block">
    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 role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      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 class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      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 class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      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>

易用性

确保给控件元素添加了aria-expanded属性。这个属性向屏幕阅读器明确定义了折叠块元素的当前的状态。如果折叠块元素默认是闭合的，它必须拥有一个 aria-expanded="false"值。如果你用.in类设置折叠块元素是打开的，在控件上设置 aria-expanded="true"即可。插件会根据折叠块元素是打开还是关闭着的，自动切换这个属性。

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

用法

折叠插件使用一些类来处理折叠行为：

• .collapse 隐藏内容
• .collapse.in 显示内容
• .collapsing 在过渡开始时加上，在过渡结束时移除。

这里类可以在_animation.scss中找到。

利用data属性

只要向一个元素添加data-toggle="collapse"以及data-target属性，就可以自动让这个元素成为可折叠元素。data-target属性接受一个CSS选择器，以应用折叠。确保向可折叠的元素添加.collapse类，如果你想让它默认打开，再添加类.in。

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

利用JavaScript

人为启用它：

$('.collapse').collapse()

选项

可以利用data属性或者JavaScript传递选项。如果用data属性，请把选项名追加到data-后面，比如说写成data-parent=""。

方法

.collapse(options)

将某块内容激活为一个可折叠的元素。接受一个可选的参数object。

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

.collapse(‘toggle’)

切换一个可折叠元素打开或隐藏。

.collapse(‘show’)

显示一个可折叠元素。

.collapse(‘hide’)

隐藏一个可折叠元素。

事件

Bootstrap的折叠类为相关的回调函数提供了事件接口。

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