Source

坍塌

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

這個怎麼運作

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

例子

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

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

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

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. 
<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">
    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>or可以通過<a>在其hrefordata-target屬性中使用 JQuery 選擇器引用多個元素來顯示和隱藏多個元素。多個<button>or<a>可以顯示和隱藏一個元素，如果它們每個都用它們的hrefordata-target屬性引用它

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

手風琴示例

使用卡片組件，您可以擴展默認折疊行為以創建手風琴。

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid。3 wolf moon officia aute，非 Cupidatat 滑板 dolor 早午餐。食品卡車藜麥 nesciunt labourum eiusmod。早午餐 3 wolf moon tempor，sunt aliqua 在上面放了一隻鳥 squid 單一產地咖啡 nulla assumendashoreditch 等。Nihil anim keffiyeh helvetica，精釀啤酒工人韋斯安德森相信 nesciunt sapiente ea proident。Ad vegan excepteur 屠夫 Vice lomo。緊身褲 occaecat 精釀啤酒從農場到餐桌，粗斜紋棉布美學合成器你可能沒有聽說過它們 accusamus labe 可持續 VHS。
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.
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 class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <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" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <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" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <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>

可訪問性

一定要添加aria-expanded到控制元素。此屬性將與控件相關聯的可折疊元素的當前狀態明確傳達給屏幕閱讀器和類似的輔助技術。如果默認情況下可折疊元素是關閉的，則控制元素上的屬性的值應為aria-expanded="false"。如果您已使用show類將可折疊元素設置為默認打開，aria-expanded="true"請改為在控件上設置。該插件將根據可折疊元素是否已打開或關閉（通過 JavaScript，或者因為用戶觸發了另一個也綁定到同一個可折疊元素的控件元素）來自動切換控件上的此屬性。如果控制元素的 HTML 元素不是按鈕（例如，一個<a>或<div>），則屬性role="button"應該添加到元素中。

如果您的控制元素以單個可折疊元素為目標——即data-target屬性指向一個id選擇器——您應該將aria-controls屬性添加到控制元素，包含id可折疊元素的 。現代屏幕閱讀器和類似的輔助技術利用此屬性為用戶提供額外的快捷方式，以直接導航到可折疊元素本身。

請注意，Bootstrap 的當前實現不涵蓋WAI-ARIA Authoring Practices 1.1 手風琴模式中描述的各種鍵盤交互- 您需要自己將這些包含在自定義 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類）。該屬性必須在目標可折疊區域上設置。
切換 布爾值 真的 在調用時切換可折疊元素

方法

異步方法和轉換

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

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

.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…
})