通过 Class 及 JavaScript 插件切换内容的显示与否。
折叠的 JavaScript 插件用于显示和隐藏内容。按钮或锚点做为触发器,对应到需要切换的元素上。折叠元素会将 height
当前值设置转为 0
。由于 CSS 如何处理动画的条件,你不能在 .collapse
元素上使用 padding
。相反,使用该 class 作为独立的包装元素。
点击按钮通过 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>
可以通过在其 href
或 data-target
属性中使用 JQuery 选择器引用它们来显示和隐藏多个元素。 如果每个引用它们
href
或 data-target
属性,多个 <button>
或 <a>
都可以显示和隐藏元素。
<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>
使用卡片组件,你可以展开默认的折叠行为以创建折叠功能。
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 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>
</h5>
</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">
<h5 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>
</h5>
</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">
<h5 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>
</h5>
</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"
应该加到元素中。
If your control element is targeting a single collapsible element – i.e. the data-target
attribute is pointing to an id
selector – you should add the aria-controls
attribute to the control element, containing the id
of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
请注意,Bootstrap 当前的折叠不包含 WAI-ARIA Authoring Practices 1.1 accordion pattern 描述的键盘操作,你需要自定义 JavaScript 来实现这些内容。
折叠插件使用一些 Class 来处理这些麻烦事:
.collapse
隐藏内容.collapse.show
显示内容.collapsing
当过渡效果开始时被添加,当过渡效果完成时被移除。这些 Class 可以在 _transitions.scss
內找到。
只需将 data-toggle="collapse"
和 data-target
添加到元素中即可自动指定可折叠元素的控制。 data-target
属性接受 CSS 选择器来应用折叠。 确保将 collapse
添加到可折叠元素上。如果你希望它默认打开,可增加额外的 show
。
可将折叠区域中的风格加到data属性 data-parent="#selector"
中。可以参考范例中的效果。
可通过 JavaScript 激活 collapse 方法,如下所示:
$('.collapse').collapse()
可通过 data 属性或 JavaScript 加入选项。对于 data 属性,将选项名称附加到 data-
, 如 data-parent=""
选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
---|---|---|---|
parent | selector | jQuery object | DOM element | false | 如果提供了一个选择器,当可折叠项目显示时,指定父元素下的所有可折叠的元素将被关闭。这与传统的折叠面板(accordion)的行为类似 - 这依赖于 card class)。该属性必须在目标可折叠区域上设置。 |
toggle | boolean | true | 切换调用可折叠元素。 |
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.
有关更多信息,请参阅我们的 JavaScript 文档
.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 提供一些事件给予折叠使用。
Event Type | Description |
---|---|
show.bs.collapse | 在调用 show 方法后触发该事件。 |
shown.bs.collapse | 当折叠元素对用户可见时触发该事件(将等待 CSS 过渡效果完成)。 |
hide.bs.collapse | 当调用 hide 实例方法时立即触发该事件。 |
hidden.bs.collapse | 当折叠元素对用户隐藏时触发该事件(将等待 CSS 过渡效果完成) |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})