bootstrap中jquery插件——collapse折叠效果-手风琴效果

先来掌握collapse插件的基本用法，再慢慢深入实例。
collapse最基本的效果是像下图所示的，点击按钮可以显示/隐藏下面的元素：

实现代码如下：

<a class="btn btn-success" href="#collapseTest" data-toggle="collapse">Link with href</a>    //a标签触发折叠效果
<button class="btn btn-info" type="button" data-target="#collapseTest" data-toggle="collapse">Button with data-target</button>    //button标签触发折叠效果

<br><br>
<div class="collapse in" id="collapseTest">    //设置为默认显示，去掉类 .in 为默认隐藏
    <div class="well">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam autem, earum, error esse harum iusto libero necessitatibus nemo possimus quibusdam quidem tempora voluptates? Id nemo saepe vel vero voluptas?
    </div>
</div>

注意：触发元素的href/data-target属性值要与目标元素的id属性值相对应，data-toggle=”collapse”扩展属性是实现折叠效果必不可少的属性。

下面利用collapse来实现一个手风琴效果（结合面板组）：

每一个标题都可以点击，点击之后展开对应的面板，同时将上一个隐藏，实现代码如下：

<h2>手风琴效果</h2>
<div class="panel-group" id="accor">    //如果想保证最多只有一个面板可以展开，则必须写一个id属性
    <div class="panel panel-info">    //浅蓝色的标题，改变 .panel-info 类可以改变标题颜色
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#collapse" data-toggle="collapse" data-parent="#accor">Lorem ipsum dolor sit amet</a>    //data-parent扩展属性值对应面板组元素的id属性值，保证最多只有一个展开
            </h4>
        </div>
        <div class="panel-collapse collapse in" id="collapse">    //类 .in 设置面板默认展开
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod...
            </div>
        </div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accor" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">    //data-parent扩展属性值对应...
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                Lorem ipsum dolor sit amet.
            </div>
        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accor" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">    //data-parent扩展属性值对应...
                    Collapsible Group Item #2
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div>
</div>

如果希望多个面板可以同时为展开状态，只需去掉触发元素的data-parent扩展属性就可以了；如果希望某一个面板默认是展开状态，就在目标元素（.panel-collapse）加上 .in 类，反之去掉。