Bootstrap折疊按鈕是一個常用的用戶界面元素，是基于JavaScript來實現(xiàn)顯示和隱藏內(nèi)容的。它允許用戶通過點擊按鈕來顯示或隱藏內(nèi)容。這種效果是通過Bootstrap的collapse類實現(xiàn)的，這個類被用于指定一個折疊元素，例如一個div標簽。當用戶點擊按鈕后，對應內(nèi)容會在隱藏和顯示之間切換。
一、運作方式
折疊（Collapse）JavaScript插件用于在頁面上顯示和隱藏內(nèi)容。它可以通過按鈕或錨點來觸發(fā)，然后切換特定元素的可見性。折疊元素在動畫中會從其當前高度變?yōu)?，并且由于CSS動畫的工作原理，無法直接在元素上使用高度過渡動畫。相反，應該使用類作為獨立的包裝元素，比如.collapse。同時，也可以通過設置padding或者其他樣式屬性來增強折疊元素的動畫效果。
二、示例
單擊下面的按鈕以通過類更改顯示和隱藏另一個元素：
- .collapse隱藏內(nèi)容；
- .collapsing在過渡期間應用；
- .collapse.show顯示內(nèi)容。
可以使用帶有href屬性的連接或是帶有data-bs-target屬性的按鈕。在這兩種情形下， data-bs-toggle=”collapse”都是必要的。
<p> <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" rel="external nofollow" 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>
二、水平折疊
Bootstrap的折疊插件確實支持水平折疊，你可以通過添加修飾符類來實現(xiàn)這一效果。你可以使用自定義Sass、內(nèi)聯(lián)樣式或Bootstrap提供的寬度實用程序來實現(xiàn)水平折疊效果。
<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或a標簽可以用來顯示與隱藏元素，需要在它們的data-bs-target或是href屬性內(nèi)部引用選擇器。同一個元素可以被多個button或a控制以顯示或隱藏，只要它們都有透過data-bs-target或是href對其進行引用。
<p> <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" rel="external nofollow" 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組件，可以擴展默認折疊行為以創(chuàng)建折疊面板。要正確實現(xiàn)手風琴風格，請務必用作包裝器。
<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。該屬性明確地向屏幕閱讀器、類似的輔助技術之控制元件傳達可折疊元素的當前狀態(tài)。如果可折疊元素預設為關閉，則控件元素上的屬性值應為aria-expanded=“false”；如果您使用show將可折疊元素設置為預設打開，則應在控件上設置aria-expanded=“true”。插件將根據(jù)可折疊元素目前的狀態(tài)（開啟與否）自動切換控件上的這個屬性（透過JavaScript，或是當使用者觸發(fā)了綁定到相同折疊元素的另一個控件元素）。如果控制的HTML元素不是按鈕（例如：a或div），那么role=“button”屬性應該被加到元素中。
如果你的控制元素鎖定了一個單一的可折疊元素（即data-bs-target屬性指向的是id選擇器），則應該在控制元素上添加aria-controls屬性，且內(nèi)部包含了可折疊元素之id?，F(xiàn)代的屏幕閱讀器、類似的輔助技術都利用此屬性為用戶提供額外的快捷方式以直接導航到可折疊元素。
請注意，Bootstrap當前的折疊應用未涵蓋WAI-ARIA Authoring Practices 1.1 accordion pattern所描述的多種選擇性的鍵盤操作，你需要自定義JavaScript來實現(xiàn)這些內(nèi)容。
六、用法
折疊插件使用一些類來處理這些繁雜工作。
- .collapse 隱藏內(nèi)容；
- .collapse.show 顯示內(nèi)容；
- .collapsing 會在轉(zhuǎn)換開始時被加入，并在結束的時候被移除。
這些類別可以在_transitions.scss 中被找到。
1、通過數(shù)據(jù)屬性
只需將data-bs-toggle=”collapse”以及data-bs-target加入元素即可自動指定控制一個或多個可折疊元素。data-bs-target屬性接受CSS選擇器以套用摺疊。請確保有在可折疊元素上添加collapse類別。如果希望它預設是打開的，加上額外的類別.show。
如果要在一個可折疊區(qū)域加入可折疊群組，加入data-bs-parent=”#selector”數(shù)據(jù)屬性。可以參考示例中的效果。
2、通過JavaScript
使用以下方式手動啟用：
$('.collapse').collapse()
3、選項
選項可以透過數(shù)據(jù)屬性或是JavaScript加入。對于數(shù)據(jù)屬性，將選項名稱加入data-bs-，如data-bs-parent=””。
4、方法
異步方法和轉(zhuǎn)換：
所有API方法都是異步的，并開始轉(zhuǎn)換。轉(zhuǎn)換一開始就返回到調(diào)用方，但在轉(zhuǎn)換結束之前返回。此外，對轉(zhuǎn)換組件的方法調(diào)用將被忽略。
- .collapse(options)：將內(nèi)容激活為可折疊元素。接受可選選項object。
$('#myCollapsible').collapse({
toggle: false
})
- .collapse(‘toggle’)：將可折疊元素切換為顯示或隱藏。在實際顯示或隱藏可折疊元素之前（即在 or 事件發(fā)生之前）返回給調(diào)用方。
- .collapse(‘show’)：顯示可折疊元素。在實際顯示可折疊元素之前（即在事件發(fā)生之前）返回給調(diào)用方。
- .collapse(‘hide’)：隱藏可折疊元素。在可折疊元素實際隱藏之前（即在事件發(fā)生之前）返回給調(diào)用方。
- .collapse(‘dispose’)：破壞元素的坍縮。
5、事件
Bootstrap 的 collapse 類公開了一些事件，用于掛接到折疊功能中。
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})
