坍塌
使用一些類和我們的 JavaScript 插件來切換項目中內容的可見性。
這個怎麼運作
折疊 JavaScript 插件用於顯示和隱藏內容。按鈕或錨點用作映射到您切換的特定元素的觸發器。折疊一個元素會將 動畫height從它的當前值變為0。鑑於 CSS 處理動畫的方式，您不能padding在.collapse元素上使用。相反，將類用作獨立的包裝元素。
prefers-reduced-motion媒體查詢。請參閱
我們可訪問性文檔的減少運動部分。
例子
單擊下面的按鈕以通過類更改顯示和隱藏另一個元素：
.collapse隱藏內容.collapsing在過渡期間應用.collapse.show顯示內容
通常，我們建議使用帶有data-target屬性的按鈕。雖然從語義角度不推薦，但您也可以使用帶有href屬性（和 a role="button"）的鏈接。在這兩種情況下，data-toggle="collapse"都是必需的。
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-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>水平的
折疊插件還支持水平折疊。添加.width修飾符類以轉換width而不是並在直接子元素上height設置 a 。width隨意編寫您自己的自定義 Sass、使用內聯樣式或使用我們的寬度實用程序。
min-height組以避免在我們的文檔中過度重繪，但這並不是明確要求的。
只有widthon 子元素是必需的。
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>多個目標
<button>or可以通過<a>在其hrefordata-target屬性中使用 JQuery 選擇器引用多個元素來顯示和隱藏多個元素。多個<button>or<a>可以顯示和隱藏一個元素，如果它們每個都用它們的hrefordata-target屬性引用它
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-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>手風琴示例
使用卡片組件，您可以擴展默認折疊行為以創建手風琴。要正確實現手風琴風格，請務必使用.accordion作為包裝。
.show該類，默認情況下會顯示此面板。
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</div>
</div>
</div>
</div>可訪問性
一定要添加aria-expanded到控制元素。此屬性將與控件相關聯的可折疊元素的當前狀態明確傳達給屏幕閱讀器和類似的輔助技術。如果默認情況下可折疊元素是關閉的，則控制元素上的屬性的值應為aria-expanded="false"。如果您已使用show類將可折疊元素設置為默認打開，aria-expanded="true"請改為在控件上設置。該插件將根據可折疊元素是否已打開或關閉（通過 JavaScript，或者因為用戶觸發了另一個也綁定到同一個可折疊元素的控件元素）來自動切換控件上的此屬性。如果控制元素的 HTML 元素不是按鈕（例如，一個<a>或<div>），則屬性role="button"應該添加到元素中。
如果您的控制元素以單個可折疊元素為目標——即data-target屬性指向一個id選擇器——您應該將aria-controls屬性添加到控制元素，包含id可折疊元素的 。現代屏幕閱讀器和類似的輔助技術利用此屬性為用戶提供額外的快捷方式，以直接導航到可折疊元素本身。
請注意，Bootstrap 的當前實現不涵蓋ARIA 創作實踐指南手風琴模式中描述的各種鍵盤交互- 您需要自己將這些包含在自定義 JavaScript 中。
用法
崩潰插件利用幾個類來處理繁重的工作：
.collapse隱藏內容.collapse.show顯示內容.collapsing在過渡開始時添加，並在過渡結束時刪除
這些類可以在_transitions.scss.
通過數據屬性
只需向元素添加data-toggle="collapse"和 adata-target即可自動分配對一個或多個可折疊元素的控制。該data-target屬性接受一個 CSS 選擇器來應用折疊。確保將類添加collapse到可折疊元素。如果您希望它默認打開，請添加附加類show。
要將手風琴式的組管理添加到可折疊區域，請添加 data 屬性data-parent="#selector"。請參閱演示以查看此操作。
通過 JavaScript
手動啟用：
$('.collapse').collapse()
選項
選項可以通過數據屬性或 JavaScript 傳遞。對於數據屬性，將選項名稱附加到 中data-，如data-parent="".
| 姓名 | 類型 | 默認 | 描述 |
|---|---|---|---|
| 父母 | 選擇器 | jQuery 對象 | DOM 元素 | 錯誤的 | 如果提供了 parent，則在顯示此可折疊項時，將關閉指定父項下的所有可折疊元素。（類似於傳統的手風琴行為 - 這取決於card類）。該屬性必須在目標可折疊區域上設置。 |
| 切換 | 布爾值 | 真的 | 在調用時切換可折疊元素 |
方法
.collapse(options)
將您的內容激活為可折疊元素。接受一個可選選項object。
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
將可折疊元素切換為顯示或隱藏。在可折疊元素實際顯示或隱藏之前（即在or事件發生之前）返回給調用者。shown.bs.collapsehidden.bs.collapse
.collapse('show')
顯示可折疊元素。在可折疊元素實際顯示之前（即在事件發生之前）返回給調用者。shown.bs.collapse
.collapse('hide')
隱藏可折疊元素。在可折疊元素實際被隱藏之前（即在事件發生之前）返回給調用者。hidden.bs.collapse
.collapse('dispose')
破壞元素的折疊。
活動
Bootstrap 的折疊類公開了一些用於掛鉤折疊功能的事件。
| 事件類型 | 描述 |
|---|---|
| show.bs.collapse | show調用實例方法時立即觸發此事件。 |
| 顯示.bs.collapse | 當折疊元素對用戶可見時觸發此事件（將等待 CSS 轉換完成）。 |
| hide.bs.collapse | hide調用該方法時立即觸發此事件。 |
| hidden.bs.collapse | 當對用戶隱藏折疊元素時會觸發此事件（將等待 CSS 轉換完成）。 |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})