Collapse折叠
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.通过几个类和我们的JavaScript插件,在整个项目中切换内容的可见性。
How it works工作原理
The collapse JavaScript plugin is used to show and hide content. 折叠JavaScript插件用于显示和隐藏内容。Buttons or anchors are used as triggers that are mapped to specific elements you toggle. 按钮或锚定用作触发器,这些触发器映射到您切换的特定元素。Collapsing an element will animate the 折叠一个元素将会把height
from its current value to 0
. height
从它的当前值变为0
。Given how CSS handles animations, you cannot use 给定CSS处理动画的方式,您不能在padding
on a .collapse
element. .collapse
元素上使用padding
。Instead, use the class as an independent wrapping element.而是应该将该类用作独立的包装元素。
prefers-reduced-motion
media query. prefers-reduced-motion
媒体查询。Example例子
Click the buttons below to show and hide another element via class changes:单击下面的按钮,通过类更改显示和隐藏另一个元素:
.collapse
hides content隐藏内容.collapsing
is applied during transitions在过渡期间应用.collapse.show
shows content显示内容
Generally, we recommend using a button with the 通常,我们建议使用带有data-bs-target
attribute. data-bs-target
属性的按钮。While not recommended from a semantic point of view, you can also use a link with the 虽然从语义角度来看不推荐使用,但您也可以使用带有href
attribute (and a role="button"
). href
属性的链接(以及role="button"
)。In both cases, the 在这两种情况下,都需要data-bs-toggle="collapse"
is required.data-bs-toggle="collapse"
。
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
Horizontal水平的
The collapse plugin also supports horizontal collapsing. 折叠插件还支持水平折叠。Add the 添加.collapse-horizontal
modifier class to transition the width
instead of height
and set a width
on the immediate child element. .collapse-horizontal
修饰符类以转换宽度而不是高度,并在直接子元素上设置宽度。Feel free to write your own custom Sass, use inline styles, or use our width utilities.您可以自由编写自己的自定义Sass、使用内联样式或使用我们的宽度实用程序。
min-height
set to avoid excessive repaints in our docs, this is not explicitly required. min-height
,以避免我们的文档中出现过多的重绘,但这并不是明确要求的。width
on the child element is required.width
是必不可少的。
<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
Multiple targets多目标
A 一个<button>
or <a>
can show and hide multiple elements by referencing them with a selector in its href
or data-bs-target
attribute. <button>
或<a>
通过在href
或data-bs-target
属性中使用选择器引用多个元素,可以显示和隐藏多个元素。Multiple 多个<button>
or <a>
can show and hide an element if they each reference it with their href
or data-bs-target
attribute<button>
或<a>
如果每个元素都使用href
或data-bs-target
属性引用某个元素,则可以显示和隐藏该元素
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
Accessibility可访问性
Be sure to add 确保将aria-expanded
to the control element. aria-expanded
添加到控件元素。This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. 该属性将绑定到控件的可折叠元素的当前状态显式传递给屏幕阅读器和类似的辅助技术。If the collapsible element is closed by default, the attribute on the control element should have a value of 如果可折叠元素在默认情况下关闭,则控件元素上的属性值应为aria-expanded="false"
. aria-expanded="false"
。If you’ve set the collapsible element to be open by default using the 如果已使用show
class, set aria-expanded="true"
on the control instead. show
类将可折叠元素设置为默认打开,请在控件上设置aria-expanded="true"
。The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). 插件将根据可折叠元素是否已打开或关闭(通过JavaScript,或者因为用户触发了另一个也绑定到同一可折叠元素的控件元素),在控件上自动切换此属性。If the control element’s HTML element is not a button (e.g., an 如果控件元素的HTML元素不是按钮(例如<a>
or <div>
), the attribute role="button"
should be added to the element.<a>
或<div>
),则应向元素添加role="button"
。
If your control element is targeting a single collapsible element – i.e. the 如果控件元素的目标是单个可折叠元素,即data-bs-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. data-bs-target
属性指向id
选择器,则应将aria-controls
属性添加到包含可折叠元素id的控件元素中。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.现代的屏幕阅读器和类似的辅助技术利用这个属性为用户提供额外的快捷方式,以便直接导航到可折叠元素本身。
Note that Bootstrap’s current implementation does not cover the various optional keyboard interactions described in the WAI-ARIA Authoring Practices 1.1 accordion pattern - you will need to include these yourself with custom JavaScript.请注意,Bootstrap的当前实现没有涵盖WAI-ARIA Authoring Practices 1.1手风琴模式中描述的各种可选键盘交互-您需要将这些包含在自定义JavaScript中。
Sass
Variables变量
$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
Classes类
Collapse transition classes can be found in 可以在scss/_transitions.scss
as these are shared across multiple components (collapse and accordion).scss/_transitions.scss
中找到折叠转换类,因为它们在多个组件(折叠和手风琴)中共享。
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
&.collapse-horizontal {
width: 0;
height: auto;
@include transition($transition-collapse-width);
}
}
Usage用法
The collapse plugin utilizes a few classes to handle the heavy lifting:collapse插件利用几个类来处理重载:
.collapse
hides the content隐藏内容.collapse.show
shows the content显示内容.collapsing
is added when the transition starts, and removed when it finishes在过渡开始时添加,在过渡结束时删除
These classes can be found in 这些类可以在_transitions.scss
._transitions.scss
中找到。
Via data attributes通过data属性
Just add 只需添加data-bs-toggle="collapse"
and a data-bs-target
to the element to automatically assign control of one or more collapsible elements. data-bs-toggle="collapse"
以及data-bs-target
,用于自动分配对一个或多个可折叠元素的控制。The data-bs-target
attribute accepts a CSS selector to apply the collapse to. data-bs-target
属性接受CSS选择器以应用折叠。Be sure to add the class 确保将类collapse
to the collapsible element. collapse
添加到可折叠元素中。If you’d like it to default open, add the additional class 如果希望它默认打开,请添加额外的类show
.show
。
To add accordion-like group management to a collapsible area, add the data attribute 要将类似手风琴的组管理添加到可折叠区域,请添加data属性data-bs-parent="#selector"
. data-bs-parent="#selector"
。Refer to the accordion page for more information.有关更多信息,请参阅手风琴页面。
Via 通过JavaScript
Enable manually with:通过以下方式手动启用:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Options选项
Options can be passed via data attributes or JavaScript. 选项可以通过数据属性或JavaScript传递。For data attributes, append the option name to 对于数据属性,将选项名称附加到数据data-bs-
, as in data-bs-parent=""
.data-bs-
后面,如data-bs-parent=""
。
parent |
selector | jQuery object | DOM element | false |
card class). card 类别)。 |
toggle |
boolean | true |
Methods方法
Asynchronous methods and transitions异步方法和转换
All API methods are asynchronous and start a transition. 所有API方法都是异步的,并开始转换。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.有关更多信息,请参阅我们的JavaScript文档。
Activates your content as a collapsible element. 将内容激活为可折叠元素。Accepts an optional options 接受可选的选项object
.object
。
You can create a collapse instance with the constructor, for example:可以使用构造函数创建折叠实例,例如:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
toggle |
shown.bs.collapse or hidden.bs.collapse event occurs).shown.bs.collapse 事件或hidden.bs.collapse 事件发生之前)。 |
show |
shown.bs.collapse event occurs). shown.bs.collapse 事件发生之前)。 |
hide |
hidden.bs.collapse event occurs).hidden.bs.collapse 事件发生之前)。 |
dispose |
|
getInstance
|
bootstrap.Collapse.getInstance(element)
|
getOrCreateInstance
|
bootstrap.Collapse.getOrCreateInstance(element)
|
Events事件
Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.Bootstrap的collapse类公开了一些事件,用于连接到折叠功能中。
show.bs.collapse |
show instance method is called.show 实例方法时,此事件立即激发。 |
shown.bs.collapse |
|
hide.bs.collapse |
hide method has been called.hide 方法后,将立即触发此事件。 |
hidden.bs.collapse |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})