?
This document uses PHP Chinese website manual Release
Collapse（折疊）
使用幾個(gè)類(lèi)和我們的 JavaScript 插件來(lái)切換項(xiàng)目?jī)?nèi)容的可見(jiàn)性。
示例
點(diǎn)擊下面的按鈕，通過(guò)班級(jí)變更顯示和隱藏另一個(gè)元素：
.collapse隱藏內(nèi)容
.collapsing在轉(zhuǎn)換期間應(yīng)用
.collapse.show顯示內(nèi)容
您可以使用具有href屬性的鏈接，或具有data-target屬性的按鈕。在這兩種情況下，data-toggle="collapse"都是必需的。
<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>
多個(gè)目標(biāo)
一個(gè)人<button>或者<a>可以通過(guò)在其href或data-target屬性中使用JQuery選擇器引用它們來(lái)顯示和隱藏多個(gè)元素。多個(gè)<button>或<a>可以顯示和隱藏元素，如果他們每個(gè)引用它們href或data-target屬性
<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的示例
使用卡組件，您可以擴(kuò)展默認(rèn)折疊行為以創(chuàng)建提一個(gè) accordion。
<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>
您還可以使用自定義標(biāo)記創(chuàng)建 accordion。添加data-children屬性并指定一組切換（例如.item）的同級(jí)元素。然后，使用與上面所示相同的屬性和類(lèi)將切換連接到關(guān)聯(lián)的內(nèi)容。
<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>
無(wú)障礙
一定要添加aria-expanded到控制元素。該屬性明確地傳達(dá)了與控件綁定的可折疊元素的當(dāng)前狀態(tài)，以屏幕閱讀器和類(lèi)似的輔助技術(shù)。如果可折疊元素默認(rèn)關(guān)閉，則控件元素上的屬性值應(yīng)為aria-expanded="false"。如果您已將折疊元素設(shè)置為默認(rèn)使用show該類(lèi)打開(kāi)，請(qǐng)aria-expanded="true"改為在控件上設(shè)置。該插件將根據(jù)是否已打開(kāi)或關(guān)閉可折疊元素（通過(guò) JavaScript，或因?yàn)橛脩?hù)觸發(fā)了另一個(gè)綁定到同一 collapsbile 元素的控件元素）而自動(dòng)在控件上切換此屬性。
此外，如果控件元素的目標(biāo)是單個(gè)可折疊元素 - 即data-target屬性指向id選擇器 - 您可以向控件aria-controls元素添加一個(gè)附加屬性，其中包含id可折疊元素的屬性?，F(xiàn)代屏幕閱讀器和類(lèi)似的輔助技術(shù)利用該屬性為用戶(hù)提供了直接導(dǎo)航到可折疊元素本身的附加快捷方式。
用法
崩潰插件利用幾個(gè)類(lèi)來(lái)處理繁重的工作：
.collapse隱藏內(nèi)容
.collapse.show顯示內(nèi)容
.collapsing在轉(zhuǎn)換開(kāi)始時(shí)添加，并在完成時(shí)刪除
這些類(lèi)可以在_transitions.scss中找到。
通過(guò)數(shù)據(jù)屬性
只需添加data-toggle="collapse"和一個(gè)data-target元素即可自動(dòng)分配一個(gè)或多個(gè)可折疊元素的控件。data-target屬性接受一個(gè) CSS 選擇器來(lái)應(yīng)用折疊。確保將該類(lèi)添加collapse到可折疊元素。如果您希望默認(rèn)打開(kāi)，請(qǐng)?zhí)砑悠渌?lèi)show。
要將類(lèi) accordion 式組管理添加到可折疊區(qū)域，請(qǐng)?zhí)砑訑?shù)據(jù)屬性data-parent="#selector"。請(qǐng)參閱演示以查看這一行動(dòng)。
通過(guò) JavaScript
手動(dòng)啟用：
$('.collapse').collapse()選項(xiàng)
選項(xiàng)可以通過(guò)數(shù)據(jù)屬性或 JavaScript 傳遞。對(duì)于數(shù)據(jù)屬性，請(qǐng)將選項(xiàng)名稱(chēng)附加到data-中，如在data-parent=""。
Name | 類(lèi)型 | 默認(rèn) | 描述 |
|---|---|---|---|
parent | 選擇器| jQuery對(duì)象| DOM元素 | 假 | 如果提供了父項(xiàng)，則在顯示此可折疊項(xiàng)目時(shí)，指定父項(xiàng)下的所有可折疊元素將被關(guān)閉。（類(lèi)似于傳統(tǒng)的手風(fēng)琴行為 - 這取決于卡類(lèi)）。該屬性必須在目標(biāo)可折疊區(qū)域上設(shè)置。 |
toggle | 布爾 | 真 | 在調(diào)用時(shí)切換可折疊元素 |
方法
異步方法和轉(zhuǎn)換
所有 API 方法都是異步的并開(kāi)始轉(zhuǎn)換。一旦轉(zhuǎn)換開(kāi)始但在結(jié)束之前，它們就立即返回給調(diào)用者。另外，對(duì)轉(zhuǎn)換組件的方法調(diào)用將被忽略。
查看我們的 JavaScript 文檔以獲取更多信息。
.collapse(options)
激活您的內(nèi)容作為可折疊的元素。接受可選的選項(xiàng)object。
$('#myCollapsible').collapse({
toggle: false}).collapse('toggle')
切換可顯示或隱藏的可折疊元素。返回到可折疊元件之前呼叫者實(shí)際上已顯示或隱藏（即在之前shown.bs.collapse或hidden.bs.collapse事件發(fā)生時(shí)）。
.collapse('show')
顯示可折疊的元素。在可折疊元素實(shí)際顯示之前（即shown.bs.collapse事件發(fā)生之前）返回給調(diào)用者。
.collapse('hide')
隱藏可折疊的元素。在可折疊元素實(shí)際上被隱藏之前（即在hidden.bs.collapse事件發(fā)生之前）返回給調(diào)用者。
.collapse('dispose')
銷(xiāo)毀元素的崩潰。
活動(dòng)
Bootstrap 的折疊類(lèi)暴露了一些掛鉤到折疊功能的事件。
事件類(lèi)型 | 描述 |
|---|---|
show.bs.collapse | 當(dāng)show instance方法被調(diào)用時(shí)，此事件立即觸發(fā)。 |
shown.bs.collapse | 當(dāng)用戶(hù)看到折疊元素時(shí)會(huì)觸發(fā)此事件（將等待CSS轉(zhuǎn)換完成）。 |
hide.bs.collapse | 當(dāng)隱藏方法被調(diào)用時(shí)，立即觸發(fā)此事件。 |
hidden.bs.collapse | 當(dāng)用戶(hù)隱藏了一個(gè)折疊元素時(shí)會(huì)觸發(fā)此事件（將等待CSS轉(zhuǎn)換完成）。 |
$('#myCollapsible').on('hidden.bs.collapse', function () { // do something…})