Bootstrap JS 折叠参考
JS 折叠 (collapse.js)
获得对可折叠组件（如手风琴和导航）的基本样式和灵活支持。
插件依赖项:Collapse 要求将转换插件包含在您的 Bootstrap 版本中。
有关 Collapsibles 的教程，请阅读我们的Bootstrap Collapse 教程。
折叠插件类
| 类 | 描述 | 实例 |
|---|---|---|
| .collapse | 隐藏内容 | 测试一下 |
| .collapse in | 显示内容 | 测试一下 |
| .collapsing | 过渡开始时添加，结束时删除 | 测试一下 |
通过 data-* 属性
只需将 data-toggle="collapse" 和 data-target 添加到元素即可自动分配对可折叠元素的控制。 data-target 属性接受一个 CSS 选择器来应用折叠。请务必将类折叠添加到可折叠元素。如果您希望它默认打开，请添加其他类。
实例
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
亲自试一试 »
提示: 要将手风琴式的组管理添加到可折叠控件，请添加数据属性 data-parent="#selector"。
通过 JavaScript
手动启用:
$('.collapse').collapse()
Collapse 折叠选项
选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-，如 data-parent=""。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| parent | selector | false | 显示此可折叠项时，将关闭指定父项下的所有可折叠元素。 （类似于传统的手风琴行为 - 这取决于面板类） - 请参见下面的示例 |
| toggle | boolean | true | 在调用时切换可折叠元素 |
Collapse 折叠方法
下表列出了所有可用的折叠方法。
| 方法 | 描述 | 试一试 |
|---|---|---|
| .collapse(options) | 使用选项激活可折叠元素。请参阅上面的选项以获取有效值 | |
| .collapse("toggle") | 切换可折叠元素 | 测试一下 |
| .collapse("show") | 显示可折叠元素 | 测试一下 |
| .collapse("hide") | 隐藏可折叠元素 | 测试一下 |
Collapse 折叠事件
下表列出了所有可用的折叠事件。
| 事件 | 描述 | 试一试 |
|---|---|---|
| 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">
Simple collapsible
</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">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">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">Footer</div>
</div>
</div>
</div>
亲自试一试 »
手风琴
以下示例通过扩展面板组件显示了一个简单的手风琴:
注释: The 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";
}
亲自试一试 »
