Collapse

通过几个类和我们的JavaScript插件,可以在整个项目中切换内容的可见性。

怎么运行的

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

The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

例子

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

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

多个目标

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>

手风琴的例子

使用card组件,您可以扩展默认的折叠行为以创建手风琴。 要正确实现手风琴样式,请确保使用.accordion作为包装器。

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.

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>

辅助功能(Accessibility)

确保在控件元素中添加“ aria-expanded”。 此属性将与控件关联的可折叠元素的当前状态明确传达给屏幕阅读器和类似的辅助技术。 如果可折叠元素默认为关闭,则控制元素上的属性的值应为aria-expanded =“ false”。 如果使用show类将可折叠元素默认设置为打开,则在控件上设置aria-expanded =“ true”。 插件将根据可折叠元素是否已打开或关闭(通过JavaScript或由于用户触发了另一个也绑定到同一可折叠元素的控件元素)自动在控件上切换此属性。 如果控件元素的HTML元素不是按钮(例如,或<div>),则应将属性“ role =“ button””添加到该元素。

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

请注意,Bootstrap的当前实现未涵盖WAI-ARIA Authoring Practices 1.1 accordion pattern 中描述的各种键盘交互- 您将需要在自定义JavaScript中添加这些内容。

用法

折叠插件利用一些类来处理繁重的工作:

  • .collapse隐藏内容
  • .collapse.show显示内容
  • 在过渡开始时添加.collapsing,并在过渡完成时将其删除

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

通过数据属性

只需在元素中添加“ data-toggle =“ collapse”“和一个” data-target“,即可自动为一个或多个可折叠元素分配控制权。 data-target属性接受CSS选择器来应用折叠。 确保将类collapse添加到可折叠元素中。 如果您希望它默认打开,请添加其他类show。

要将类似手风琴的组管理添加到可折叠区域,请添加数据属性data-parent =“#selector”。 请参阅该演示以查看实际操作。

通过JavaScript

手动启用:

$('.collapse').collapse()

选项(Options)

可以通过数据属性或JavaScript传递选项。 对于数据属性,将选项名称附加到data-中,如`data-parent =“”中一样。

Name Type Default Description
parent selector | jQuery object | DOM element false If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class). The attribute has to be set on the target collapsible area.
toggle boolean true Toggles the collapsible element on invocation

方法

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

.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')

关闭元素的切换(collapse)。

事件(Events)

Bootstrap切换(collapse)类提供了一些事件,可以挂接到切换(collapse)功能中。

Event Type Description
show.bs.collapse This event fires immediately when the show instance method is called.
shown.bs.collapse This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.collapse This event is fired immediately when the hide method has been called.
hidden.bs.collapse This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})