Bootstrap 折疊（Collapse）插件

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

Bootstrap 折疊（Collapse）插件
如果您想要單獨引用該插件的功能，那麼您需要引用 <b>collapse.js</b>。同時，也需要在您的 Bootstrap 版本中引用 Transition（過渡）插件。或者，正如 Bootstrap 插件概覽一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

您可以使用折疊（Collapse）插件：

<b>建立可折疊的分組或折疊面闆（accordion）</b>，如下所示：

<a data-toggle="collapse" data-parent="#accordion"

href="#collapseOne">

點選我進行展開，再次點選我進行折疊。第 1 部分

</a>

</h4>

</div>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson

cred nesciunt sapiente ea proident. Ad vegan excepteur butcher

vice lomo.

href="#collapseTwo">

點選我進行展開，再次點選我進行折疊。第 2 部分

href="#collapseThree">

點選我進行展開，再次點選我進行折疊。第 3 部分

結果如下所示：

<b>data-toggle="collapse"</b> 添加到您想要展開或折疊的元件的連結上。

<b>href</b> 或 <b>data-target</b> 屬性添加到父元件，它的值是子元件的 id。

<b>data-parent</b> 屬性把折疊面闆（accordion）的 id 添加到要展開或折疊的元件的連結上。

<b>建立不帶 accordion 标記的簡單的可折疊元件（collapsible）</b>，如下所示：

<button type="button" class="btn btn-primary" data-toggle="collapse"

data-target="#demo">

簡單的可折疊元件

</button>

正如您在執行個體中看到的，我們建立了一個可折疊的元件，與折疊面闆（accordion）不同，我們沒有添加屬性 <b>data-parent</b>。

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

Class

描述

執行個體

.collapse

隐藏内容。

嘗試一下

.collapse.in

顯示内容。

.collapsing

當過渡效果開始時被添加，當過渡效果完成時被移除。

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

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

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

<b>通過 JavaScript</b>：可通過 JavaScript 激活 collapse 方法，如下所示：

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

選項名稱

類型/預設值

Data 屬性名稱

parent

selector

預設值：false

data-parent

如果提供了一個選擇器，當可折疊項目顯示時，指定父元素下的所有可折疊的元素将被關閉。這與傳統的折疊面闆（accordion）的行為類似 - 這依賴于 accordion-group 類。

toggle

boolean

預設值：true

data-toggle

切換調用可折疊元素。

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

方法

<b>Options:</b> .collapse(options)

激活内容為可折疊元素。接受一個可選的 options 對象。

<b>Toggle:</b> .collapse('toggle')

切換顯示/隐藏可折疊元素。

<b>Show:</b> .collapse('show')

顯示可折疊元素。

<b>Hide:</b> .collapse('hide')

隐藏可折疊元素。

下面的執行個體示範了方法的用法：

點選我進行展開，再次點選我進行折疊。第 1 部分--hide 方法

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred

nesciunt sapiente ea proident. Ad vegan excepteur butcher vice

lomo.

點選我進行展開，再次點選我進行折疊。第 2 部分--show 方法

點選我進行展開，再次點選我進行折疊。第 3 部分--toggle 方法

href="#collapseFour">

點選我進行展開，再次點選我進行折疊。第 4 部分--options 方法

$(function () { $('#collapseFour').collapse({

toggle: false

})});

$(function () { $('#collapseTwo').collapse('show')});

$(function () { $('#collapseThree').collapse('toggle')});

$(function () { $('#collapseOne').collapse('hide')});

</script>

下表列出了折疊（Collapse）插件中要用到的事件。這些事件可在函數中當鈎子使用。

事件

show.bs.collapse

在調用 show 方法後觸發該事件。

shown.bs.collapse

當折疊元素對使用者可見時觸發該事件（将等待 CSS 過渡效果完成）。

hide.bs.collapse

當調用 hide 執行個體方法時立即觸發該事件。

hidden.bs.collapse

當折疊元素對使用者隐藏時觸發該事件（将等待 CSS 過渡效果完成）。

下面的執行個體示範了事件的用法：

href="#collapseexample">

點選我進行展開，再次點選我進行折疊。--shown 事件

cred nesciunt sapiente ea proident.

Ad vegan excepteur butcher vice lomo.

$(function () {

$('#collapseexample').on('show.bs.collapse', function () {

alert('嘿，當您展開時會提示本警告');})

});