Bootstrap JS 折叠
JS 折叠 (collapse.js)
获取折叠组件（如手风琴和导航）的基础样式和灵活支持。
插件依赖：折叠组件需要将 transitions 插件包含在你的 Bootstrap 版本中。
要了解关于折叠组件的教程，请阅读我们的 Bootstrap 折叠教程。
折叠插件类
| 类 | 描述 | 示例 |
|---|---|---|
| .collapse | 隐藏内容 | 试一试 |
| .collapse in | 显示内容 | 试一试 |
| .collapsing | 在过渡开始时添加，在过渡完成时移除 | 试一试 |
通过 data-* 属性
只需向元素添加 `data-toggle="collapse"` 和 `data-target`，即可自动分配折叠元素的控件。`data-target` 属性接受一个 CSS 选择器来应用折叠效果。确保在折叠元素上添加 `collapse` 类。如果你希望它默认展开，请添加额外的 `in` 类。
示例
<button class="btn" data-toggle="collapse" data-target="#demo">可折叠</button>
<div id="demo" class="collapse">
一些文本..
</div>
自己动手试一试 »
提示： 要为折叠控件添加类似手风琴的组管理，请添加 `data-parent="#selector"` 数据属性。
通过 JavaScript
使用以下命令手动启用：
$('.collapse').collapse()
折叠选项
可以通过数据属性或 JavaScript 传递选项。对于数据属性，将选项名称附加到 `data-` 后面，例如 `data-parent=""`。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| parent | selector | false | 当显示此折叠项时，指定父项下的所有可折叠元素都将关闭。（类似于传统的手风琴行为 - 这取决于 panel 类）- 见下面的示例 |
| toggle | boolean | true | 在调用时切换可折叠元素 |
折叠方法
下表列出了所有可用的折叠方法。
| 方法 | 描述 | 试一试 |
|---|---|---|
| .collapse(options) | 使用选项激活可折叠元素。有关有效值，请参见上面的选项。 | |
| .collapse("toggle") | 切换可折叠元素 | 试一试 |
| .collapse("show") | 显示可折叠元素 | 试一试 |
| .collapse("hide") | 隐藏可折叠元素 | 试一试 |
折叠事件
下表列出了所有可用的折叠事件。
| 事件 | 描述 | 试一试 |
|---|---|---|
| show.bs.collapse | 在折叠元素即将显示时触发 | 试一试 |
| shown.bs.collapse | 在折叠元素完全显示时触发（CSS 过渡完成后） | 试一试 |
| hide.bs.collapse | 在折叠元素即将隐藏时触发 | 试一试 |
| hidden.bs.collapse | 在折叠元素完全隐藏时触发（CSS 过渡完成后） | 试一试 |
更多示例
简单的可折叠
以下示例使按钮切换另一个元素的展开和折叠内容
示例
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">
简单的可折叠
</button>
<div id="demo" class="collapse in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
自己动手试一试 »
可折叠面板
以下示例显示了一个可折叠面板
示例
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">可折叠面板</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">面板正文</div>
<div class="panel-footer">面板页脚</div>
</div>
</div>
</div>
自己动手试一试 »
可折叠列表组
以下显示了一个包含列表组的可折叠面板
示例
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">可折叠列表组</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">页脚</div>
</div>
</div>
</div>
自己动手试一试 »
手风琴
以下示例通过扩展 panel 组件显示了一个简单的手风琴
注意： `data-parent` 属性确保当一个折叠项显示时，该父项下的所有折叠元素都会被关闭。
示例
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
可折叠组 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
可折叠组 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
可折叠组 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div>
自己动手试一试 »
展开和折叠切换图标和文本
以下示例在打开和关闭可折叠内容时更改打开/关闭的文本和图标
示例
$(document).ready(function(){
$("#demo").on("hide.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
});
});
自己动手试一试 »
或者您可以使用 CSS
示例
/* 当可折叠内容显示时图标 */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* 当可折叠内容隐藏时图标 */
.btn.collapsed:after {
content: "\e080";
}
自己动手试一试 »
