Bootstrap JS 折叠
JS 折叠 (collapse.js)
获取基本样式和对可折叠组件（如手风琴和导航）的灵活支持。
插件依赖项：折叠需要在您的 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 属性 data-parent="#selector"。
通过 JavaScript
使用以下命令手动启用
$('.collapse').collapse()
折叠选项
选项可以通过 data 属性或 JavaScript 传递。对于 data 属性，将选项名称附加到 data-，例如 data-parent=""。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| parent | 选择器 | false | 当此可折叠项显示时，指定父元素下的所有可折叠元素都将关闭。（类似于传统手风琴行为 - 这取决于 panel 类） - 请参见下面的示例 |
| toggle | 布尔值 | 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">一</li>
<li class="list-group-item">二</li>
<li class="list-group-item">三</li>
</ul>
<div class="panel-footer">页脚</div>
</div>
</div>
</div>
自己试试 »
手风琴
以下示例通过扩展面板组件显示一个简单的手风琴
注意：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> 打开');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> 关闭');
});
});
自己试试 »
或者您可以使用 CSS
示例
/* 可折叠内容显示时的图标 */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* 可折叠内容隐藏时的图标 */
.btn.collapsed:after {
content: "\e080";
}
自己试试 »
