Bootstrap 折叠

来源：互联网发布：网络连接小图标不见了编辑：程序博客网时间：2024/05/15 19:43

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

一、声明式用法

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

默认显示折叠区域：

<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种事件，分别对应下拉菜单的弹出前、弹出后、关闭前、关闭后，如下;

0 0