Bootstrap 折叠

折叠插件能把大段内容收进面板，点击标题即可展开或收起；多个面板共用一个父容器时还能做成"手风琴"，同一时间只展开一块，是 FAQ、侧边菜单的高频组件。

单个可折叠区域

触发按钮用 data-toggle="collapse"，配合 href 或 data-target 指向要折叠的容器：

<button type="button" class="btn btn-primary" data-toggle="collapse"
        data-target="#demo">
  展开 / 收起内容
</button>
<div id="demo" class="collapse">
  <div class="well">这里是默认隐藏的详细内容。</div>
</div>

说明：点击按钮后，#demo 会以动画向下展开，出现灰色 well 内容块；再次点击则向上收起。

默认展开

给折叠区域额外加 in 类，页面加载时就处于展开状态：

<div id="openBox" class="collapse in">
  这段内容默认是展开的，点击上方按钮可收起。
</div>

手风琴效果

在父容器内用 data-parent 关联各面板，展开其中一个时其它面板会自动收起：

<div id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#p1">第一章</a>
      </h4>
    </div>
    <div id="p1" class="panel-collapse collapse in">
      <div class="panel-body">第一章的内容……</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#p2">第二章</a>
      </h4>
    </div>
    <div id="p2" class="panel-collapse collapse">
      <div class="panel-body">第二章的内容……</div>
    </div>
  </div>
</div>

说明：默认第一章展开；点击"第二章"时第一章自动收起、第二章展开，形成经典的手风琴折叠效果。

方法与事件

也可以用 collapse('show' / 'hide' / 'toggle') 编程控制，并监听展开收起事件：

<script>
  $('#p1').on('shown.bs.collapse', function () {
    console.log('展开动画已完成');
  });
  $('#p1').collapse('toggle');   // 切换展开状态
</script>

说明：show、hide 事件在动画开始前触发，shown、hidden 事件在动画结束后触发，可用来懒加载内容或更新箭头图标。

小结：折叠插件用一条 data-toggle="collapse" 即可展开收起；要手风琴互斥就补 data-parent 指向父容器，动画前后的四个事件留给需要联动逻辑的复杂页面。