python測試開發django-188.Bootstrap摺疊（Collapse）外掛
阿新 • • 發佈：2022-03-09
前言
摺疊（Collapse）外掛可以很容易地讓頁面區域摺疊起來。如果您想要單獨引用該外掛的功能，那麼您需要引用 collapse.js， bootstrap已經包含了這個外掛。
可以直接引用 bootstrap.js 或壓縮版的 bootstrap.min.js
摺疊（Collapse）
以使用帶有屬性的連結href或帶有屬性的按鈕data-target。在這兩種情況下，data-toggle="collapse"都是必需的。
單擊下面的按鈕以通過類更改顯示和隱藏另一個元素：
- .collapse隱藏內容
- .collapsing在過渡期間應用
- .collapse.in顯示內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap 例項 - 摺疊面板</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <p> <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> href 關聯id屬性 </a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> data-target 關聯id屬性 </button> </p> <div class="collapse" id="collapseExample"> <div class="card card-body"> 這一段文字可以摺疊，點選後也可以展示 </div> </div> </body> </html>
實現效果，預設不展開
點選按鈕後展開文字
如果想預設展開，可以通過 .collapse.in 屬性控制
<div class="collapse in" id="collapseExample">
<div class="card card-body">
這一段文字可以摺疊，點選後也可以展示
</div>
</div>
多個摺疊
只需向元素新增data-toggle="collapse"和 adata-target即可自動分配對可摺疊元素的控制。
該data-target屬性接受一個 CSS 選擇器來應用摺疊。確保將類新增collapse到可摺疊元素。如果您希望它預設開啟，請新增附加類in。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap 例項 - 摺疊面板</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 摺疊項 Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> body 1 正文內容 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 摺疊項 Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> 正文內容2 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 摺疊項 #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> 正文記憶體 3 </div> </div> </div> </div> </body> </html>
實現效果
通過 JavaScript
手動啟用
$('.collapse').collapse()
.collapse(options) 將您的內容啟用為可摺疊元素。接受一個可選選項object。
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle') 將可摺疊元素切換為顯示或隱藏。在可摺疊元素實際顯示或隱藏之前（即在or事件發生之前）返回給呼叫者。 shown.bs.collapse, hidden.bs.collapse .collapse('show') 顯示可摺疊元素。在可摺疊元素實際顯示之前（即在事件發生之前）返回給呼叫者。shown.bs.collapse`
.collapse('hide') 隱藏可摺疊元素。在可摺疊元素實際被隱藏之前（即在事件發生之前）返回給呼叫者。hidden.bs.collapse
Bootstrap 的摺疊類公開了一些用於掛鉤摺疊功能的事件。
| 事件型別 | 描述 |
|---|---|
| show.bs.collapse | show呼叫例項方法時立即觸發此事件。 |
| 顯示.bs.collapse | 當摺疊元素對使用者可見時觸發此事件（將等待 CSS 轉換完成）。 |
| hide.bs.collapse | hide呼叫該方法時立即觸發此事件。 |
| hidden.bs.collapse | 當對使用者隱藏摺疊元素時會觸發此事件（將等待 CSS 轉換完成）。 |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})