5.10.1　声明式用法

最简单的用法就像其他功能一样，声明一个触发按钮和一个折叠区域。先看以下默认显示折叠区域的示例。

  1. <!--  默认显示折叠区域-->
  2. <button class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发按钮</button>
  3. <div id="demo" class="collapse in" >折叠区域...</div>

默认隐藏折叠区域则有所不同，触发元素要添加一个.collapsed样式，而且折叠区域的.in样式也要去除。

  1. <!--  默认隐藏折叠区域-->
  2. <button class="btn btn-danger collapsed" data-toggle="collapse" data-target="#demo">触发
  3.     按钮</button>
  4. <div id="demo" class="collapse " >折叠区域...</div>

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

通过上述两个例子和样式分析，我们知道了显示和隐藏的两个状态，其实该插件操作的也就是这些内容。可以为该插件总结出以下两个基本的要点：

❑要标识插件的data-toggle="collapse"以及表示折叠区域的data-target="#demo"。

❑要正确设置折叠区域的显示/隐藏状态，以及触发元素的collapsed样式标记。

读者可能会问，这只是单个折叠区域的情况，针对手风琴风格，一般里面都会有多个折叠区域，而且显示一个折叠区域的时候，要关闭所有其他的折叠区域。

针对这个情况，可根据前面几个插件的经验猜想出，要实现上述效果，就得为手风琴定义一个大的容器元素来包含所有的触发元素和折叠区域，在单击其中一个元素的时候，先关闭所有的折叠区域，再打开所单击的区域（如果所单击的区域原来就是打开的，则关闭它），这样一来就实现了我们想要的效果了。

但是如何通过声明式用法来使用呢？答案是：Bootstrap给触发元素提供了一个data-parent属性，用于设置一个父容器，在处理的时候，会把这个容器里的所有折叠区域都关闭掉，从而实现我们所说的手风琴效果。示例代码如下：

  1. <div class="panel-group" id="accordion">
  2.     <div class="panel panel-default">
  3.         <div class="panel-heading">
  4.             <h4 class="panel-title">
  5.                 <a data-toggle="collapse" data-parent="#accordion" href=
  6.                     "#collapseOne">触发元素#1</a>
  7.             </h4>
  8.         </div>
  9.         <div id="collapseOne" class="panel-collapse collapse in">
  10.             <div class="panel-body">
  11.                 折叠内容...
  12.             </div>
  13.         </div>
  14.     </div>
  15.     <!-- 其他两个pannel格式和上边的一样 -->
  16. </div>

通过示例，我们可以看出以下几点：

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

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

❑每个panel里的触发元素都要指定data-parent属性（这是重复工作，希望作者改进一下）。

❑data-parent属性的值（本例是accordion）对应panel-group样式元素的id（或者样式选择符也行）。在源码分析的时候记住这几点就行了。