折疊（Collapse）

在項目中透過Boostrap的類別及JavaScript插件切換內容的可視性。

On this page

工作原理

JavaScript的摺疊插件被用于顯示和隱藏內容。按鈕、錨被用作為觸發器，對應到需要被切換的元素上。折疊一個元素會將它的height從當前的值轉換為0。基于CSS處理動畫的方式，你不能在帶有.collapse的元素上使用padding；相反的，應該把它作為獨立的包裝元素。

該元件的動畫效果取決于prefers-reduced-motion media queries。

例子

點擊以下按鈕，透過改變Class來顯示及隱藏另一個元素：

.collapse 隱藏內容。
.collapsing 會在轉換的過程中被套用。
.collapse.show 顯示內容。

可以使用帶有href屬性的連接或是帶有data-bs-target屬性的按鈕。在這兩種情形下， data-bs-toggle="collapse"都是必要的。

Link with href

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

<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屬性內部引用選擇器。同一個元素可以被多個button或a控制以顯示或隱藏，只要它們都有透過data-bs-target或是href對其進行引用。

Toggle first element

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.

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.

<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。該屬性明確地向屏幕閱讀器、類似的輔助技術之控制元件傳達可折疊元素的當前狀態。如果可折疊元素預設為關閉，則控件元素上的屬性值應為aria-expanded=“false”；如果您使用show將可折疊元素設置為預設打開，則應在控件上設置aria-expanded=“true”。插件將根據可折疊元素目前的狀態（開啟與否）自動切換控件上的這個屬性（透過JavaScript，或是當使用者觸發了綁定到相同折疊元素的另一個控件元素）。如果控制的HTML元素不是按鈕（例如：a或div），那么role=“button”屬性應該被加到元素中。

如果你的控制元素鎖定了一個單一的可折疊元素（即data-bs-target屬性指向的是id選擇器），則應該在控制元素上添加aria-controls屬性，且內部包含了可折疊元素之id?，F代的屏幕閱讀器、類似的輔助技術都利用此屬性為用戶提供額外的快捷方式以直接導航到可折疊元素。

請注意，Bootstrap當前的折疊應用未涵蓋WAI-ARIA Authoring Practices 1.1 accordion pattern所描述的多種選擇性的鍵盤操作，你需要自定義JavaScript來實現這些內容。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 隱藏內容。
.collapse.show 顯示內容。
.collapsing 會在轉換開始時被加入，并在結束的時候被移除。

這些類別可以在_transitions.scss 中被找到.

通過數據屬性

只需將data-bs-toggle="collapse"以及data-bs-target加入元素即可自動指定控制一個或多個可折疊元素。data-bs-target屬性接受CSS選擇器以套用摺疊。請確保有在可折疊元素上添加collapse類別。如果希望它預設是打開的，加上額外的類別.show。

如果要在一個可折疊區域加入可折疊群組，加入data-bs-parent="#selector"數據屬性?？梢詤⒖际纠械男Ч?。

通過JavaScript

透過以下語法手動啟用：

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})

選項

選項可以透過數據屬性或是JavaScript加入。對于數據屬性，將選項名稱加入data-bs-，如data-bs-parent=""。

Name	Type	Default	Description
`parent`	selector \| jQuery object \| DOM element	`false`	如果加入了parent，則當可折疊物件為顯示時，指定父項下的所有可折疊元素將被關閉。（類似于傳統的折疊控件行為-這取決于card）。該屬性必須在目標可折疊區域上設置。
`toggle`	boolean	`true`	切換可折疊元素

方法

異步方法和轉換

所有API方法都是異步的，并開始轉換。轉換一開始就返回到調用方，但在轉換結束之前返回。此外，對轉換組件的方法調用將被忽略。

將內容啟用為可折疊元素。接受一個選擇性的選項 object。

可以透過建構函式建立一個摺疊示例，舉例來說：

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})

Method	Description
`toggle`	將一個可折疊元素切換為顯示或隱藏。在可折疊元素實際顯示或隱藏之前返回給調用者。（即在shown.bs.collapse 或hidden.bs.collapse 事件發生之前）。
`show`	顯示一個可折疊元素。在可折疊元素實際顯示之前返回給調用者。（例如，shown.bs.collapse 事件發生前）.
`hide`	隱藏一個可折疊元素。在可折疊元素實際被隱藏之前返回給調用者。（例如，在hidden.bs.collapse 事件發生之前）。
`dispose`	銷毀一個元素的折疊。（移除DOM元素上儲存的數據）
`getInstance`	允許你獲取與DOM元素關聯之折疊示例的靜態方法。

事件

ootstrap提供一些事件給折疊組件使用。

Event type	Description
`show.bs.collapse`	當調用show示例方法時，會立即觸發此事件。
`shown.bs.collapse`	當折疊元素顯示為可見時，會觸發此事件（將等待CSS轉換完成）。
`hide.bs.collapse`	當調用hide方式時，會立即觸發此事件。
`hidden.bs.collapse`	當折疊元素被隱藏時，會觸發此事件（將等待CSS轉換完成）。

var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})