Bootstrap JS 折叠
JS 折叠 (collapse.js)
获取对可折叠组件（如手风琴和导航）的基本样式和灵活支持。
插件依赖性：Collapse 需要将转换插件包含在您的 Bootstrap 版本中。
有关可折叠的教程，请阅读我们的Bootstrap 折叠教程。
折叠插件类
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content | 尝试一下 |
| .collapse in | Shows the content | 尝试一下 |
| .collapsing | Added when the transition starts, and removed when it finishes | 尝试一下 |
通过 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()
折叠选项
选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-，如 data-parent=""。
| Name | Type | Default | Description |
|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class) - See example below |
| toggle | boolean | true | Toggles the collapsible element on invocation |
折叠方法
下表列出了所有可用的折叠方法。
| Method | Description | 尝试一下 |
|---|---|---|
| .collapse(options) | Activates the collapsible element with an option. See options above for valid values | |
| .collapse("toggle") | Toggles the collapsible element | 尝试一下 |
| .collapse("show") | Shows the collapsible element | 尝试一下 |
| .collapse("hide") | Hides the collapsible element | 尝试一下 |
折叠事件
下表列出了所有可用的折叠事件。
| Event | Description | 尝试一下 |
|---|---|---|
| show.bs.collapse | Occurs when the collapsible element is about to be shown | 尝试一下 |
| shown.bs.collapse | Occurs when the collapsible element is fully shown (after CSS transitions have completed) | 尝试一下 |
| hide.bs.collapse | Occurs when the collapsible element is about to be hidden | 尝试一下 |
| hidden.bs.collapse | Occurs when the collapsible element is fully hidden (after CSS transitions have completed) | 尝试一下 |
更多示例
简单可折叠
以下示例使按钮切换另一个元素的展开和折叠内容：
示例
<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">Collapsible list group</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>
亲自试一试 »
手风琴
以下示例通过扩展面板组件展示了一个简单的手风琴：
笔记：这个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">
Collapsible Group 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">
Collapsible Group 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">
Collapsible Group 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：
示例
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content is hidden */
.btn.collapsed:after {
content: "\e080";
}
亲自试一试 »