Bootstrap 教程
在本教程中，將學(xué)習(xí)如何通過 Bootstarp 創(chuàng)建可折疊的組件。
您必須引用 jquery.js 和 bootstrap-collapse.js - 這兩個(gè) JavaScript 文件都位于 docs/assets/js 文件夾內(nèi)。
您可以在不編寫大量 JavaScript 或者不調(diào)用 JavaScript 的情況下創(chuàng)建可折疊的組件。
第一個(gè)實(shí)例演示如何不調(diào)用 JavaScript 創(chuàng)建可折疊的組件。
這里有三點(diǎn)需要注意。第一，添加 data-toggle="collapse" 到您要點(diǎn)擊的鏈接上，用來展開或折疊組件。
第二，添加一個(gè) href 或一個(gè) data-target 屬性到父組件，它的值為子組件的 id。
第三，添加一個(gè) data-parent 屬性用來創(chuàng)建手風(fēng)琴式的效果。data-parent 屬性的值與主容器 div （保存整個(gè)手風(fēng)琴組件）的 id 屬性的值相同。如果您想要?jiǎng)?chuàng)建一個(gè)簡(jiǎn)單的折疊組件，不需要像手風(fēng)琴那么復(fù)雜，就不需要添加這個(gè)屬性。
第二個(gè)實(shí)例演示如何創(chuàng)建簡(jiǎn)單的可折疊組件。
您可以使用下面的代碼來通過 JavaScript 觸發(fā)折疊。
$(".collapse").collapse() 這里有一些通過 Bootstrap Collapsible JavaScript 插件使用的選項(xiàng)、方法、事件。具體如下所示：
parent:值的類型為 Selector。默認(rèn)值為 false。當(dāng)父元素顯示時(shí)，父元素下所有的可折疊元素是關(guān)閉的。
toggle:值的類型為 Boolean。默認(rèn)值為 true。當(dāng)被調(diào)用時(shí)，切換所有的可折疊元素。
toggle:值的類型為 Boolean。默認(rèn)值為 true。當(dāng)被調(diào)用時(shí)，切換所有的可折疊元素。
.collapse(options):觸發(fā)可折疊內(nèi)容。接受一個(gè)可選的 option 對(duì)象。
.collapse('toggle'):展示或隱藏一個(gè)可折疊的頁面元素。
.collapse('show'):展示一個(gè)可折疊的頁面元素。
.collapse(hide):隱藏一個(gè)可折疊的頁面元素。
show:當(dāng) show 實(shí)例方法被調(diào)用之后，此事件被立即觸發(fā)。
shown:當(dāng)可折疊頁面元素顯示出來之后（同時(shí) CSS 過渡效果也已執(zhí)行完畢），此事件被觸發(fā)。
hide:當(dāng) hide 實(shí)例方法被調(diào)用之后，此事件被立即觸發(fā)。
hidden:當(dāng)可折疊頁面元素向用戶隱藏之后（同時(shí) CSS 過渡效果也已執(zhí)行完畢），此事件被觸發(fā)。
其他擴(kuò)展