摺疊 | Collapse (Components: Collapse) - Bootstrap 4 中文開發手冊
使用幾個類和我們的 JavaScript 外掛來切換專案內容的可見性。

示例

點選下面的按鈕，通過班級變更顯示和隱藏另一個元素：.collapse 隱藏內容.collapsing 在轉換期間應用.collapse.show 顯示內容您可以使用具有href屬性的連結，或具有data-target屬性的按鈕。在這兩種情況下，data-toggle="collapse"都是必需的。在 getbootstrap.com 上開啟示例

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" 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">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

多個目標

一個人<button>或者<a>可以通過在其href或data-target屬性中使用JQuery選擇器引用它們來顯示和隱藏多個元素。多個<button>或<a>可以顯示和隱藏元素，如果他們每個引用它們href或data-target屬性在 getbootstrap.com 上開啟示例

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" 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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Accordion的示例

使用卡元件，您可以擴充套件預設摺疊行為以建立提一個 accordion。在 getbootstrap.com 上開啟示例

<div id="accordion" role="tablist">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

您還可以使用自定義標記建立 accordion。新增data-children屬性並指定一組切換（例如.item）的同級元素。然後，使用與上面所示相同的屬性和類將切換連線到關聯的內容。在 getbootstrap.com 上開啟示例

<div id="exampleAccordion" data-children=".item">
  <div class="item">
    <a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion1" aria-expanded="true" aria-controls="exampleAccordion1">
      Toggle item
    </a>
    <div id="exampleAccordion1" class="collapse show" role="tabpanel">
      <p class="mb-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
      </p>
    </div>
  </div>
  <div class="item">
    <a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion2" aria-expanded="false" aria-controls="exampleAccordion2">
      Toggle item 2
    </a>
    <div id="exampleAccordion2" class="collapse" role="tabpanel">
      <p class="mb-3">
        Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      </p>
    </div>
  </div>
</div>

無障礙

一定要新增aria-expanded到控制元素。該屬性明確地傳達了與控制元件繫結的可摺疊元素的當前狀態，以螢幕閱讀器和類似的輔助技術。如果可摺疊元素預設關閉，則控制元件元素上的屬性值應為aria-expanded="false"。如果您已將摺疊元素設定為預設使用show該類開啟，請aria-expanded="true"改為在控制元件上設定。該外掛將根據是否已開啟或關閉可摺疊元素（通過 JavaScript，或因為使用者觸發了另一個繫結到同一 collapsbile 元素的控制元件元素）而自動在控制元件上切換此屬性。此外，如果控制元件元素的目標是單個可摺疊元素 - 即data-target屬性指向id選擇器 - 您可以向控制元件aria-controls元素新增一個附加屬性，其中包含id可摺疊元素的屬性。現代螢幕閱讀器和類似的輔助技術利用該屬性為使用者提供了直接導航到可摺疊元素本身的附加快捷方式。

用法

崩潰外掛利用幾個類來處理繁重的工作：.collapse 隱藏內容.collapse.show 顯示內容.collapsing 在轉換開始時新增，並在完成時刪除這些類可以在_transitions.scss中找到。

通過資料屬性

只需新增data-toggle="collapse"和一個data-target元素即可自動分配一個或多個可摺疊元素的控制元件。data-target屬性接受一個 CSS 選擇器來應用摺疊。確保將該類新增collapse到可摺疊元素。如果您希望預設開啟，請新增其他類show。要將類 accordion 式組管理新增到可摺疊區域，請新增資料屬性data-parent="#selector"。請參閱演示以檢視這一行動。

通過 JavaScript

手動啟用：

$('.collapse').collapse()

選項

選項可以通過資料屬性或 JavaScript 傳遞。對於資料屬性，請將選項名稱附加到data-中，如在data-parent=""。

方法

非同步方法和轉換

所有 API 方法都是非同步的並開始轉換。一旦轉換開始但在結束之前，它們就立即返回給呼叫者。另外，對轉換元件的方法呼叫將被忽略。檢視我們的 JavaScript 文件以獲取更多資訊。

.collapse(options)

啟用您的內容作為可摺疊的元素。接受可選的選項object。

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

切換可顯示或隱藏的可摺疊元素。返回到可摺疊元件之前呼叫者實際上已顯示或隱藏（即在之前shown.bs.collapse或hidden.bs.collapse事件發生時）。

.collapse('show')

顯示可摺疊的元素。在可摺疊元素實際顯示之前（即shown.bs.collapse事件發生之前）返回給呼叫者。

.collapse('hide')

隱藏可摺疊的元素。在可摺疊元素實際上被隱藏之前（即在hidden.bs.collapse事件發生之前）返回給呼叫者。

.collapse('dispose')

銷燬元素的崩潰。

活動

Bootstrap 的摺疊類暴露了一些掛鉤到摺疊功能的事件。

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})