Collapse 折叠框

<a class="btn btn-primary collapsed" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  链接元素使用href绑定目标元素
</a>

<button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button元素使用data-target绑定目标折叠框
</button>

<!-- collapse折叠框 -->
<div class="collapse" id="collapseExample" aria-expanded="false" style="height: 0px;">
  <div class="well">
    地振高冈，一派西山千古秀；门朝大海，三合河水万年流。
  </div>
</div>

运行一下

风琴式折叠框

运行一下

可折叠的列表组

运行一下

collapse折叠框 - JavaScript常用方法

$("#example").collapse(option)

option命令	说明
hide	隐藏collapse折叠框
show	显示collapse折叠框
toggle	切换collapse折叠框的隐藏和显示状态

示例：展开所有折叠框

$('.collapse').collapse("show");

运行一下

collapse折叠框 - 事件

事件	说明
show.bs.collapse	一旦触发collapse折叠框的show动作（显示）则触发该事件
shown.bs.collapse	触发collapse折叠框的show动作（显示），且collapse折叠框已经显示完毕，则触发该事件
hide.bs.collapse	一旦触发collapse折叠框的hide动作（隐藏）则触发该事件
hidden.bs.collapse	触发collapse折叠框hide动作（隐藏），且collapse折叠框已经隐藏完毕，则触发该事件

示例：当collapse折叠框显示完毕后，则触发预设事件（弹出“反清复明”）

$('.collapse').on('shown.bs.collapse', function () {
  alert( "反清复明" );
});

运行一下