坍塌

使用一些類和我們的 JavaScript 插件來切換項目中內容的可見性。

在本頁面

這個怎麼運作

折疊 JavaScript 插件用於顯示和隱藏內容。按鈕或錨點用作映射到您切換的特定元素的觸發器。折疊一個元素會將動畫height從它的當前值變為0。鑑於 CSS 處理動畫的方式，您不能padding在.collapse元素上使用。相反，將類用作獨立的包裝元素。

該組件的動畫效果依賴於 prefers-reduced-motion媒體查詢。請參閱我們可訪問性文檔的減少運動部分。

例子

單擊下面的按鈕以通過類更改顯示和隱藏另一個元素：

.collapse隱藏內容
.collapsing在過渡期間應用
.collapse.show顯示內容

通常，我們建議使用帶有data-bs-target屬性的按鈕。雖然從語義角度不推薦，但您也可以使用帶有href屬性（和 a role="button"）的鏈接。在這兩種情況下，data-bs-toggle="collapse"都是必需的。

與href鏈接

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

html

<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>

水平的

折疊插件還支持水平折疊。添加.collapse-horizontal修飾符類以轉換width而不是並在直接子元素上height設置 a 。width隨意編寫您自己的自定義 Sass、使用內聯樣式或使用我們的寬度實用程序。

請注意，雖然下面的示例有一 min-height組以避免我們的文檔中過度重繪，但這並不是明確要求的。 只有widthon 子元素是必需的。

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.

html

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      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-bs-target屬性中使用選擇器引用多個元素來顯示和隱藏多個元素。多個<button>or<a>可以顯示和隱藏一個元素，如果它們每個都用它們的hrefordata-bs-target屬性引用它

切換第一個元素

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.

html

<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可折疊元素的。現代屏幕閱讀器和類似的輔助技術利用此屬性為用戶提供額外的快捷方式，以直接導航到可折疊元素本身。

請注意，Bootstrap 的當前實現不涵蓋ARIA 創作實踐指南手風琴模式中描述的各種可選鍵盤交互- 您需要自己將這些包含在自定義 JavaScript 中。

薩斯

變量

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

課程

Collapse 過渡類可以在其中找到，scss/_transitions.scss因為它們在多個組件（collapse 和手風琴）之間共享。

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

用法

崩潰插件利用幾個類來處理繁重的工作：

.collapse隱藏內容
.collapse.show顯示內容
.collapsing在過渡開始時添加，並在過渡結束時刪除

這些類可以在_transitions.scss.

通過數據屬性

只需向元素添加data-bs-toggle="collapse"和 adata-bs-target即可自動分配對一個或多個可折疊元素的控制。該data-bs-target屬性接受一個 CSS 選擇器來應用折疊。確保將類添加collapse到可折疊元素。如果您希望它默認打開，請添加附加類show。

要將手風琴式的組管理添加到可折疊區域，請添加 data 屬性data-bs-parent="#selector"。有關詳細信息，請參閱手風琴頁面。

通過 JavaScript

手動啟用：

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

選項

由於選項可以通過數據屬性或 JavaScript 傳遞，因此您可以將選項名稱附加到data-bs-，如data-bs-animation="{value}". 通過數據屬性傳遞選項時，請確保將選項名稱的大小寫類型從“ camelCase ”更改為“ kebab-case ”。例如，使用data-bs-custom-class="beautifier"代替data-bs-customClass="beautifier".

從 Bootstrap 5.2.0 開始，所有組件都支持一個實驗性的保留數據屬性data-bs-config，該屬性可以將簡單的組件配置作為 JSON 字符串容納。當一個元素具有data-bs-config='{"delay":0, "title":123}'和data-bs-title="456"屬性時，最終title值將是456並且單獨的數據屬性將覆蓋給定的值 on data-bs-config。此外，現有數據屬性能夠容納 JSON 值，例如data-bs-delay='{"show":0,"hide":150}'.

姓名	類型	默認	描述
`parent`	選擇器，DOM 元素	`null`	如果提供了 parent，則在顯示此可折疊項時，將關閉指定父項下的所有可折疊元素。（類似於傳統的手風琴行為 - 這取決於`card`類）。該屬性必須在目標可折疊區域上設置。
`toggle`	布爾值	`true`	在調用時切換可折疊元素。

方法

異步方法和轉換

所有 API 方法都是異步的並開始一個轉換。他們在轉換開始但在結束之前立即返回給調用者。此外，過渡組件上的方法調用將被忽略。

有關更多信息，請參閱我們的 JavaScript 文檔。

將您的內容激活為可折疊元素。接受一個可選選項object。

您可以使用構造函數創建折疊實例，例如：

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

方法	描述
`dispose`	破壞元素的折疊。（刪除 DOM 元素上存儲的數據）
`getInstance`	允許您獲取與 DOM 元素關聯的折疊實例的靜態方法，您可以像這樣使用它`bootstrap.Collapse.getInstance(element)`：
`getOrCreateInstance`	靜態方法，它返回與 DOM 元素關聯的折疊實例，或者在未初始化的情況下創建一個新實例。你可以像這樣使用它：`bootstrap.Collapse.getOrCreateInstance(element)`.
`hide`	隱藏可折疊元素。在可折疊元素實際被隱藏之前（例如，在事件發生之前）返回給調用者。`hidden.bs.collapse`
`show`	顯示可折疊元素。在可折疊元素實際顯示之前（例如，在事件發生之前）返回給調用者。`shown.bs.collapse`
`toggle`	將可折疊元素切換為顯示或隱藏。在可折疊元素實際顯示或隱藏之前（即在or事件發生之前）返回給調用者。`shown.bs.collapsehidden.bs.collapse`

活動

Bootstrap 的折疊類公開了一些用於掛鉤折疊功能的事件。

事件類型	描述
`hide.bs.collapse`	`hide`調用該方法時立即觸發此事件。
`hidden.bs.collapse`	當對用戶隱藏折疊元素時會觸發此事件（將等待 CSS 轉換完成）。
`show.bs.collapse`	`show`調用實例方法時立即觸發此事件。
`shown.bs.collapse`	當折疊元素對用戶可見時觸發此事件（將等待 CSS 轉換完成）。

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})