折疊（Collapse）
在項目中透過Boostrap的類別及JavaScript插件切換內(nèi)容的可視性。
工作原理
JavaScript的摺疊插件被用于顯示和隱藏內(nèi)容。按鈕、錨被用作為觸發(fā)器，對應到需要被切換的元素上。折疊一個元素會將它的height從當前的值轉(zhuǎn)換為0?；贑SS處理動畫的方式，你不能在帶有.collapse的元素上使用padding；相反的，應該把它作為獨立的包裝元素。
例子
點擊以下按鈕，透過改變Class來顯示及隱藏另一個元素：
.collapse隱藏內(nèi)容。.collapsing會在轉(zhuǎn)換的過程中被套用。.collapse.show顯示內(nèi)容。
可以使用帶有href屬性的連接或是帶有data-bs-target屬性的按鈕。在這兩種情形下， data-bs-toggle="collapse"都是必要的。
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>多個目標
button或a標簽可以用來顯示與隱藏元素，需要在它們的data-bs-target或是href屬性內(nèi)部引用選擇器。同一個元素可以被多個button或a控制以顯示或隱藏，只要它們都有透過data-bs-target或是href對其進行引用。
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>親和性
確保有在控制元素中添加aria-expanded。該屬性明確地向屏幕閱讀器、類似的輔助技術(shù)之控制元件傳達可折疊元素的當前狀態(tài)。如果可折疊元素預設(shè)為關(guān)閉，則控件元素上的屬性值應為aria-expanded=“false”；如果您使用show將可折疊元素設(shè)置為預設(shè)打開，則應在控件上設(shè)置aria-expanded=“true”。插件將根據(jù)可折疊元素目前的狀態(tài)（開啟與否）自動切換控件上的這個屬性（透過JavaScript，或是當使用者觸發(fā)了綁定到相同折疊元素的另一個控件元素）。如果控制的HTML元素不是按鈕（例如：a或div），那么role=“button”屬性應該被加到元素中。
如果你的控制元素鎖定了一個單一的可折疊元素（即data-bs-target屬性指向的是id選擇器），則應該在控制元素上添加aria-controls屬性，且內(nèi)部包含了可折疊元素之id?，F(xiàn)代的屏幕閱讀器、類似的輔助技術(shù)都利用此屬性為用戶提供額外的快捷方式以直接導航到可折疊元素。
請注意，Bootstrap當前的折疊應用未涵蓋WAI-ARIA Authoring Practices 1.1 accordion pattern所描述的多種選擇性的鍵盤操作，你需要自定義JavaScript來實現(xiàn)這些內(nèi)容。WAI-ARIA Authoring Practices 1.1 accordion pattern
Sass
Variables
$transition-collapse: height .35s ease;
Classes
Collapse transition classes can be found in scss/_transitions.scss as these are shared across multiple
components (collapse and accordion).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
用法
折疊插件使用一些類來處理這些繁雜工作。
.collapse隱藏內(nèi)容。.collapse.show顯示內(nèi)容。.collapsing會在轉(zhuǎn)換開始時被加入，并在結(jié)束的時候被移除。
這些類別可以在_transitions.scss 中被找到.
通過數(shù)據(jù)屬性
只需將data-bs-toggle="collapse"以及data-bs-target加入元素即可自動指定控制一個或多個可折疊元素。data-bs-target屬性接受CSS選擇器以套用摺疊。請確保有在可折疊元素上添加collapse類別。如果希望它預設(shè)是打開的，加上額外的類別.show。
如果要在一個可折疊區(qū)域加入可折疊群組，加入data-bs-parent="#selector"數(shù)據(jù)屬性。可以參考示例中的效果。
通過JavaScript
透過以下語法手動啟用：
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
選項
選項可以透過數(shù)據(jù)屬性或是JavaScript加入。對于數(shù)據(jù)屬性，將選項名稱加入data-bs-，如data-bs-parent=""。
| Name | Type | Default | Description |
|---|---|---|---|
parent |
selector | jQuery object | DOM element | false |
如果加入了parent，則當可折疊物件為顯示時，指定父項下的所有可折疊元素將被關(guān)閉。（類似于傳統(tǒng)的折疊控件行為-這取決于card）。該屬性必須在目標可折疊區(qū)域上設(shè)置。 |
toggle |
boolean | true |
切換可折疊元素 |
方法
異步方法和轉(zhuǎn)換
所有API方法都是異步的，并開始轉(zhuǎn)換。轉(zhuǎn)換一開始就返回到調(diào)用方，但在轉(zhuǎn)換結(jié)束之前返回。此外，對轉(zhuǎn)換組件的方法調(diào)用將被忽略。
將內(nèi)容啟用為可折疊元素。接受一個選擇性的選項 object。
可以透過建構(gòu)函式建立一個摺疊示例，舉例來說：
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
| Method | Description |
|---|---|
toggle |
將一個可折疊元素切換為顯示或隱藏。在可折疊元素實際顯示或隱藏之前返回給調(diào)用者。（即在shown.bs.collapse 或hidden.bs.collapse 事件發(fā)生之前）。 |
show |
顯示一個可折疊元素。在可折疊元素實際顯示之前返回給調(diào)用者。（例如，shown.bs.collapse 事件發(fā)生前）. |
hide |
隱藏一個可折疊元素。在可折疊元素實際被隱藏之前返回給調(diào)用者。（例如，在hidden.bs.collapse 事件發(fā)生之前）。 |
dispose |
銷毀一個元素的折疊。（移除DOM元素上儲存的數(shù)據(jù)） |
getInstance |
允許你獲取與DOM元素關(guān)聯(lián)之折疊示例的靜態(tài)方法。 |
事件
ootstrap提供一些事件給折疊組件使用。
| Event type | Description |
|---|---|
show.bs.collapse |
當調(diào)用show示例方法時，會立即觸發(fā)此事件。 |
shown.bs.collapse |
當折疊元素顯示為可見時，會觸發(fā)此事件（將等待CSS轉(zhuǎn)換完成）。 |
hide.bs.collapse |
當調(diào)用hide方式時，會立即觸發(fā)此事件。 |
hidden.bs.collapse |
當折疊元素被隱藏時，會觸發(fā)此事件（將等待CSS轉(zhuǎn)換完成）。 |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})