JS Collapse (collapse.js)
获得基本样式和像手风琴和导航可折叠组件灵活的支持。
插件的依赖：收起要求转换插件包含在你的引导版本。
对于有关Collapsibles教程，请阅读我们Bootstrap Collapse教程 。
The Collapse Plugin Classes
通过data-*属性
只需添加data-toggle="collapse"和一个数据目标元素自动分配一个可折叠元素的控制权。 数据-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-parent=""
| 名称 | 类型 | 默认 | 描述 |
|---|---|---|---|
| parent | selector | false | 时显示该可折叠项目指定的父下的所有元素折叠将被关闭。 （类似传统手风琴的行为 - 这是依赖于面板类） - 参见下面的例子 |
| 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">
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";
} 试一试»