Bootstrap 折叠

折叠插件实现的效果是：但单击一个触发元素时，在另外一个可折叠区域进行显示（或隐藏），再次单击时可以反转显示状态。

一、声明式用法

声明一个触发按钮和一个折叠区域，示例代码：

默认显示折叠区域：

<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#one">触发按钮</button>
<div id="one" class="collapse in">这是折叠区域！！</div>

默认隐藏折叠区域：

<button type="button" class="btn btn-default" data-target="#two" data-toggle="collapse">触发按钮</button>
<div id="two" class="collapse">这是折叠区域</div>

说明：.collapsed样式是表示该插件所对应的demo区域已经处于隐藏状态了，而collapse和in两个样式一起用的时候是块级显示状态，单独collapse样式则是隐藏状态。另外，该触发元素还可能有一个collapsing样式，该样式是在折叠区域进行隐藏显示动画过程中附加的。

二、利用面板和折叠制作手风琴效果：

<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="#one">触发按钮</a></h4>
</div>
<div class="panel-collapse collapse in" id="one">
<div class="panel-body">
this is the collapsed content!
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#two">触发按钮</a></h4>
</div>
<div class="panel-collapse collapse" id="two">
<div class="panel-body">
this is the collapsed content!
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#three">触发按钮</a></h4>
</div>
<div class="panel-collapse collapse" id="three">
<div class="panel-body">
this is the collapsed content!
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#four">触发按钮</a></h4>
</div>
<div class="panel-collapse collapse" id="four">
<div class="panel-body">
this is the collapsed content!
</div>
</div>
</div>
</div>

效果：



说明：

1、使用panel的panel-title作为触发元素，使用panel-body的父元素作为折叠区域。

2、使用一个panel-group样式的元素包含多个panel，从而实现手风琴效果。

3、每个panel里的触发元素都要指定data-parent属性，且属性值为panel-group的div的id值。

三、折叠的JS用法

利用了collapse（）函数，对折叠区域利用这个函数，例如：$(".collapse").collapse();

1、选项：就是在collapse（）中可以指定参数，如下：



2、事件

有4种事件，分别对应下拉菜单的弹出前、弹出后、关闭前、关闭后，如下;