Bootstrap折叠按钮 - 站长百科

Bootstrap折叠按钮是一个常用的用户界面元素，是基于JavaScript来实现显示和隐藏内容的。它允许用户通过点击按钮来显示或隐藏内容。这种效果是通过Bootstrap的collapse类实现的，这个类被用于指定一个折叠元素，例如一个div标签。当用户点击按钮后，对应内容会在隐藏和显示之间切换。

一、运作方式

折叠（Collapse）JavaScript插件用于在页面上显示和隐藏内容。它可以通过按钮或锚点来触发，然后切换特定元素的可见性。折叠元素在动画中会从其当前高度变为0，并且由于CSS动画的工作原理，无法直接在元素上使用高度过渡动画。相反，应该使用类作为独立的包装元素，比如.collapse。同时，也可以通过设置padding或者其他样式属性来增强折叠元素的动画效果。

二、示例

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

.collapse隐藏内容；
.collapsing在过渡期间应用；
.collapse.show显示内容。

可以使用带有href属性的连接或是带有data-bs-target属性的按钮。在这两种情形下， data-bs-toggle=”collapse”都是必要的。

<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" rel="external nofollow"  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">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>

二、水平折叠

Bootstrap的折叠插件确实支持水平折叠，你可以通过添加修饰符类来实现这一效果。你可以使用自定义Sass、内联样式或Bootstrap提供的宽度实用程序来实现水平折叠效果。

<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>

三、多个目标

button或a标签可以用来显示与隐藏元素，需要在它们的data-bs-target或是href属性内部引用选择器。同一个元素可以被多个button或a控制以显示或隐藏，只要它们都有透过data-bs-target或是href对其进行引用。

<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" rel="external nofollow"  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">
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>

四、手风琴风格

使用卡片.accordion组件，可以扩展默认折叠行为以创建折叠面板。要正确实现手风琴风格，请务必用作包装器。

<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" 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">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left 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">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left 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">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</div>
</div>
</div>
</div>

五、亲和性

确保有在控制元素中添加aria-expanded。该属性明确地向屏幕阅读器、类似的辅助技术之控制元件传达可折叠元素的当前状态。如果可折叠元素预设为关闭，则控件元素上的属性值应为aria-expanded=“false”；如果您使用show将可折叠元素设置为预设打开，则应在控件上设置aria-expanded=“true”。插件将根据可折叠元素目前的状态（开启与否）自动切换控件上的这个属性（透过JavaScript，或是当使用者触发了绑定到相同折叠元素的另一个控件元素）。如果控制的HTML元素不是按钮（例如：a或div），那么role=“button”属性应该被加到元素中。

如果你的控制元素锁定了一个单一的可折叠元素（即data-bs-target属性指向的是id选择器），则应该在控制元素上添加aria-controls属性，且内部包含了可折叠元素之id。现代的屏幕阅读器、类似的辅助技术都利用此属性为用户提供额外的快捷方式以直接导航到可折叠元素。

请注意，Bootstrap当前的折叠应用未涵盖WAI-ARIA Authoring Practices 1.1 accordion pattern所描述的多种选择性的键盘操作，你需要自定义JavaScript来实现这些内容。

六、用法

折叠插件使用一些类来处理这些繁杂工作。

.collapse 隐藏内容；
.collapse.show 显示内容；
.collapsing 会在转换开始时被加入，并在结束的时候被移除。

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

1、通过数据属性

只需将data-bs-toggle=”collapse”以及data-bs-target加入元素即可自动指定控制一个或多个可折叠元素。data-bs-target属性接受CSS选择器以套用摺叠。请确保有在可折叠元素上添加collapse类别。如果希望它预设是打开的，加上额外的类别.show。

如果要在一个可折叠区域加入可折叠群组，加入data-bs-parent=”#selector”数据属性。可以参考示例中的效果。

2、通过JavaScript

使用以下方式手动启用：

$('.collapse').collapse()

3、选项

选项可以透过数据属性或是JavaScript加入。对于数据属性，将选项名称加入data-bs-，如data-bs-parent=””。

4、方法

异步方法和转换：

所有API方法都是异步的，并开始转换。转换一开始就返回到调用方，但在转换结束之前返回。此外，对转换组件的方法调用将被忽略。

.collapse(options)：将内容激活为可折叠元素。接受可选选项object。

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

.collapse(‘toggle’)：将可折叠元素切换为显示或隐藏。在实际显示或隐藏可折叠元素之前（即在 or 事件发生之前）返回给调用方。
.collapse(‘show’)：显示可折叠元素。在实际显示可折叠元素之前（即在事件发生之前）返回给调用方。
.collapse(‘hide’)：隐藏可折叠元素。在可折叠元素实际隐藏之前（即在事件发生之前）返回给调用方。
.collapse(‘dispose’)：破坏元素的坍缩。

5、事件

Bootstrap 的 collapse 类公开了一些事件，用于挂接到折叠功能中。

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