手风琴--声明式触发手风琴（三），玩转Bootstrap（JS插件篇）教程-慕课网

第五步，激活手风琴交互行为。要完成交互行为，需要在标题链接中自定义两个属性，一个是data-toggle，并且取值为collapse；另一个是data-target，取值为各个面板内容区的标识符，比如说ID，在这个例子分别是#panel1、#panel2和#panel3：

<div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1">标题一</a></h4>
    </div>
    <div class="panel-collapse collapse in" id="panel1">
        <div class="panel-body">折叠区内容...</div>
    </div>
</div>

到此，实现了单个面板的“显示/隐藏”的切换。但离手风琴效果还略有差距。

注意：在这个案例中不加入data-target="#panel1"也可以，因为前面已经有了href="#panel1"，但如是button按钮作为触发器就必须使用data-target="#panel1"语句了。

第六步，定义data-parent属性，实现点击一个其中一个元素时，关闭所有的折叠区，再打开所单击的区域（如果所单击区域是展示的，则会关闭）。这个data-parent取值与手风琴面板容器的标识符相匹配，比如这个例子是指 #myAccordion：

<div class="panel-group" id="myAccordion">
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">标题一</a>
            </h4>
        </div>
…

最终效果如下：

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

 ☑ 使用 panel 的 panel-title 做为触元素，使用panel-body的父元素作为折叠区；
 ☑ 使用一个 panel-group 来包含多个 panel，从而实现手风琴效果；
 ☑ 每个 panel 里的触发元素都要指定data-parent属性；
 ☑ data-parent 属性的值对应 panel-group样式元素的ID或者其他样式标识符；
 ☑ 触发元素需要指定 data-toggle，并且值为 collapse；
 ☑ 触发元素都要指定 data-target属性；
 ☑ data-target属性的值对应 panel-body 的父元素的ID或者其他样式标识符。

手风琴--声明式触发手风琴（三）

任务