資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何自動關閉手風琴內部的所有可摺疊元素？
我們將在文章中使用 Bootstrap 手風琴元件來演示如何在父手風琴中摺疊所有子手風琴。手風琴是一個可摺疊元件，有助於在網頁上顯示展開/摺疊型別的內容。
在這篇文章中，我們將使用 Bootstrap 5 手風琴元件以巢狀的方式顯示可擴充套件/可摺疊元素列表。現在，首先，我們將透過將事件偵聽器附加到父手風琴來偵聽“hide”摺疊事件。之後，當“hide”摺疊事件被觸發時，我們將找到該手風琴內的所有可摺疊元素，並相應地從這些元素中刪除“show”類，以便在 UI 中隱藏它們。
示例
讓我們用一個例子來討論這種方法，如下所示：
附加到手風琴的事件偵聽器：
“hide.bs.collapse”
檔名：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to automatically close all collapsible elements inside of the accordion when closing the accordion?</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</head>
<body>
<h3>How to automatically close all collapsible elements inside of the accordion when closing the accordion?</h3>
<div class="accordion">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#parent">
Accordion Item #1
</button>
<div id="parent" class="accordion-collapse collapse show">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#child-one">
Accordion sub Item #1
</button>
<div id="child-one" class="accordion-collapse collapse show">
Accordion sub item 1 - body 1
</div>
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#child-two">
Accordion sub Item #1
</button>
<div id="child-two" class="accordion-collapse collapse show">
Accordion sub item 1 - body 1
</div>
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#child-three">
Accordion sub Item #1
</button>
<div id="child-three" class="accordion-collapse collapse show">
Accordion sub item 1 - body 1
</div>
</div>
</div>
<script>
const parent = document.getElementById('parent')
parent.addEventListener('hide.bs.collapse', function() {
const collapsibleEls = this.querySelectorAll('.collapse.show');
collapsibleEls.forEach(el => {
el.classList.remove('show')
})
})
</script>
</body>
</html>
結論
在這篇文章中，我們學習瞭如何在關閉父手風琴時自動關閉手風琴內部的所有可摺疊元素，我們透過在父可摺疊元素上新增“hide.bs.collapse”事件偵聽器實現了這一點。
更新於：2023年2月22日
2K+ 瀏覽量
廣告