Bootstrap 學習之js插件（折疊（collapse）插件）

Bootstrap 折疊（Collapse）插件

　　折疊（Collapse）插件可以很容易地讓頁面區域折疊起來。無論您用它來創建折疊導航還是內容面板，它都允許很多內容選項。

用法

下表列出了折疊（Collapse）插件用於處理繁重的伸縮的 class：

Class	描述
.collapse	隱藏內容。
.collapse.in	顯示內容。
.collapsing	當過渡效果開始時被添加，當過渡效果完成時被移除。

您可以通過以下兩種方式使用折疊（Collapse）插件：

• 通過 data 屬性：向元素添加 data-toggle="collapse" 和 data-target，自動分配可折疊元素的控制。data-target 屬性接受一個 CSS 選擇器，並會對其應用折疊效果。請確保向可折疊元素添加 class .collapse。如果您希望它默認情況下是打開的，請添加額外的 class .in。

  為了向可折疊控件添加類似折疊面板的分組管理，請添加 data 屬性 data-parent="#selector"。

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
        簡單的可折疊組件
    </button>
    <div class="collapse " id="demo">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
        vice lomo.
    </div>

沒有添加額外的 class .in的情況下，折疊的內容默認是沒有打開的。

添加in的情況下是默認打開的，如下所示：

 <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
        簡單的可折疊組件
    </button>
    <div class="collapse in" id="demo">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
        vice lomo.
    </div>

　　 <button type="button" class="btn btn-primary  collapsed" data-toggle="collapse" data-target="#demo">
        簡單的可折疊組件
    </button>
    <div class="collapse" id="demo">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
        vice lomo.
    </div>

　　這個代碼實現的效果是一樣的；即默認隱藏區域，觸發元素添加一個.collapsed樣式。而且折疊的.in樣式也要去除。

總結上面就是說.collapsed樣式是表示該插件所對應的demo區域已經處於隱藏狀態了，而collapse和in兩個樣式一起用的是塊級顯示狀態，而單獨的collapse樣式則是隱藏狀態。另外，該觸發元素還可能有一個collapsing樣式，該樣式是在折疊區域進行隱藏顯示動畫過程中附加的。

　　通過上述兩個例子和樣式分析，我們知道了顯示和隱藏的兩個狀態，其實該插件操作的也就是這些內容。可以為該插件總結以下兩個基本的要點：

　　1、要標識插件的data-toggle=“collapse”以及表示折疊區域的data-target=“#demo”;

　　2、要正確設置折疊區域的顯示/隱藏狀態，以及觸發元素的collapsed樣式標記。

現在我們注意到這個只是單個的折疊區域的情況，針對手風琴風格，一般里面都會有多個折疊區域，而且顯示一個折疊區域的時候，要關閉所有其他的折疊區域。

針對這種情況，可以根據前面幾個插件的經驗猜想出，要實現上述效果，就需要為手風琴定義一個大的容器元素來包涵所有的觸發元素和折疊區域，在單擊其中一個元素的時候，先關閉所有的折疊區域，再打開鎖單擊的區域，這樣一來就實現了我們想要的效果了。

　　但是我們應該如何通過聲明式用法來實現呢？答案是：Bootstrap給觸發元素提供了一個data-parent屬性，用於設置一個父容器，在處理的時候，會把這個容器里面的所有折疊區域都關閉，從而實現完美所說的手風琴效    <div class="panel-group" id="accordion"        <div class="panel panel-default">

            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        點擊我進行展開，再次點擊我進行折疊。第 1 部分
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                    vice lomo.
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                        點擊我進行展開，再次點擊我進行折疊。第 2 部分
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse ">
                <div class="panel-body">
                    Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                    vice lomo.
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                        點擊我進行展開，再次點擊我進行折疊。第 3 部分
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                    vice lomo.
                </div>
            </div>
        </div>
    </div>

 

1. data-toggle="collapse" 添加到您想要展開或折疊的組件的鏈接上。
2. href 或 data-target 屬性添加到父組件，它的值是子組件的 id。
3. data-parent 屬性把折疊面板（accordion）的 id 添加到要展開或折疊的組件的鏈接上。

選項

有一些選項是通過 data 屬性或 JavaScript 來傳遞的。下表列出了這些選項：

選項名稱	類型/默認值	Data 屬性名稱	描述
parent	selector 默認值：false	data-parent	如果提供了一個選擇器，當可折疊項目顯示時，指定父元素下的所有可折疊的元素將被關閉。這與創痛的折疊面板（accordion）的行為類似 - 這依賴於 accordion-group 類。
toggle	boolean 默認值：true	data-toggle	切換調用可折疊元素。

方法

下面是一些折疊（Collapse）插件中有用的方法：

方法	描述	實例
Options:.collapse(options)	激活內容為可折疊元素。接受一個可選的 options 對象。	$('#identifier').collapse({ toggle: false })
Toggle: .collapse('toggle')	切換顯示/隱藏可折疊元素。	$('#identifier').collapse('toggle')
Show: .collapse('show')	顯示可折疊元素。	$('#identifier').collapse('show')
Hide: .collapse('hide')	隱藏可折疊元素。	$('#identifier').collapse('hide')