Bootstrap 的 Collapse

一、簡介

Collapse 插件為 HTML 標簽提供折疊、展開行為，依賴 transition.js（bootstrap.js 文件中已包含）。

二、實現機制

實現 Collapse 效果需要：

1. 一個 <a> 標簽或者 <button> 標簽：<a> 標簽使用 href 屬性；<button> 標簽使用 data-target 屬性。
2. 上面兩種情況，都要添加 data-toggle="collapse" 屬性。
3. 被 Collapse 的目標標簽要設置 id 以及添加樣式 .collapse。

三、簡單的 Collapse

下面是一個簡單 Collapse 的完整例子（線上例子在 這里）：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="well text-center">
                <a class="btn btn-info" href="#targetDivOfCollapse" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="targetDivOfCollapse">Collapse by Link href</a>
            </div>
        </div>
        <div class="col-md-6">
            <div class="well text-center">
                <button class="btn btn-info" data-target="#targetDivOfCollapse" data-toggle="collapse" type="button" aria-expanded="false" aria-controls="targetDivOfCollapse">Collapse by Button data-target</a>
            </div>
        </div>
        <div id="targetDivOfCollapse" class="col-md-12 collapse">
            <div class="well">
                <h2 class="text-center">Content</h2>
            </div>
        </div>
    </div>
</div>

被標記為 .collapse 的標簽是隱藏的；被標記為 .collapse.in 的標簽是顯示的；被標記為 .collapsing 的標簽表示在過渡階段。

四、帶 Panel 的 Collapse

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="collapseListGroupHeading1">
        <h4 class="panel-title"> <a href="#collapseListGroup1" class="collapsed" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseListGroup1"> Collapsible list group </a> </h4>
    </div>
    <div class="panel-collapse collapse" role="tabpanel" id="collapseListGroup1" aria-labelledby="collapseListGroupHeading1" aria-expanded="false">
        <ul class="list-group">
            <li class="list-group-item">Bootply</li>
            <li class="list-group-item">One itmus ac facilin</li>
            <li class="list-group-item">Second eros</li>
        </ul>
        <div class="panel-footer">
            Footer
        </div>
    </div>
</div>

五、手風琴式 Collapse

手風琴式 Collapse 是稍復雜的帶 Panel 的 Collapse。這里 是一個例子。

<div class="container">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    Content 1
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Collapsible Group Item #2
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    Content 2
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        Collapsible Group Item #3
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                    Content 3
                </div>
            </div>
        </div>
    </div>
</div>

這里的手風琴容器標記為 .panel-group，里面包含 3 個 .panel。

在每個 .panel-heading 中都有一個 <a> 標簽，它控制 .panel-collapse.collapse（這是必須的）的。

<a> 標簽元素要指明下列屬性。

1. data-toggle="collapse"：表示是 collapseable 插件。
2. data-parent="#accordion"：指明父元素，保證只有一個子元素是展開的。
3. href="#..."：執行 Collapse 操作的目標元素。
4. 未展開元素要設置 .collapsed 類。

六、通過 JavaScript 代碼調用 Collapse

之前都是用標簽 API 完成 Collapse 效果的，使用 JavaScript 代碼調用的方式參考 這里。

七、參考鏈接

http://getbootstrap.com/javascript/#collapse

（完）