我正在嘗試設置可折疊的 div。它們工作正常，但是當我打開另一個可折疊 div 時，打開的 div 不會關閉，除非我手動將它們一一關閉。如何在打開另一個 div 時自動創建一個打開的可折疊 div？超文本標記語言<html> <button type="button" class="collapsible">BUTTON</button> <div class="content"> <p style="padding: 20px 0;">CONTENT</p> </div> <button type="button" class="collapsible">BUTTON</button> <div class="content"> <p style="padding: 20px 0;">CONTENT</p> </div> <button type="button" class="collapsible">BUTTON</button> <div class="content"> <p style="padding: 20px 0;">CONTENT</p> </div></html>JSvar coll = document.getElementsByClassName("collapsible");var i;for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight){ content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } });}
2 回答
哆啦的時光機
TA貢獻1779條經驗 獲得超6個贊
在打開折疊的 div 之前，您的代碼必須關閉所有打開的 div。
// toggle collapse of specified content
function toggleContent(content) {
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
}
// collapse all open content
function collapseAllOpenContent() {
const colls = document.getElementsByClassName('collapsible');
for (const coll of colls) {
if (coll.classList.contains('active')) {
coll.classList.remove('active');
toggleContent(coll.nextElementSibling);
}
}
}
工作示例：
// toggle collapse of specified content
function toggleContent(content) {
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
}
// collapse all open content
function collapseAllOpenContent() {
const colls = document.getElementsByClassName('collapsible');
for (const coll of colls) {
if (coll.classList.contains('active')) {
coll.classList.remove('active');
toggleContent(coll.nextElementSibling);
}
}
}
const colls = document.getElementsByClassName('collapsible');
for (const coll of colls) {
coll.addEventListener('click', function() {
if (!this.classList.contains('active')) {
collapseAllOpenContent();
}
this.classList.toggle('active');
toggleContent(this.nextElementSibling);
});
}
.collapsible {
background-color: #fff;
color: #555;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #fff;
}
.collapsible:after {
content: '\002B';
color: #555;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #fff;
}
<button type="button" class="collapsible">BUTTON</button>
<div class="content">
<p style="padding: 20px 0;">CONTENT</p>
</div>
<button type="button" class="collapsible">BUTTON</button>
<div class="content">
<p style="padding: 20px 0;">CONTENT</p>
</div>
<button type="button" class="collapsible">BUTTON</button>
<div class="content">
<p style="padding: 20px 0;">CONTENT</p>
</div>
慕斯709654
TA貢獻1840條經驗 獲得超5個贊
人們對這種方法有很多擔憂......
關注點分離，例如單獨的樣式與模板（CSS 與 HTML）。將所有樣式移至單獨的 css 文件中。也在 JS 中設置樣式，而不是使用 CSS 類，您可以在其中添加所需的樣式，例如 maxHeight、padding 等。
不要在代碼中使用語義 HTML。例如，使用詳細信息作為包裝器，使用摘要作為包裝器的描述，并使用按鈕來切換 p 內容。
根據
document.getElementsByClassName("collapsible")集合的長度添加多個點擊事件，這在性能方面不太好。您可以在 document.body 上添加事件，然后驗證單擊的元素是否屬于給定類型并具有給定的類/id。
但是，此時此刻，您甚至不再需要 JS 來完成此類功能。您需要做的就是使用details和summary標簽，它將以這種手風琴方式運行。
<details>
<summary>Accordion item title 1</summary>
<div class="accordion-content">
content for the second item
</div>
</details>
<details>
<summary>Accordion item title 2</summary>
<div class="accordion-content">
content for the first item
</div>
</details>
- 2 回答
- 0 關注
- 161 瀏覽
添加回答
舉報
0/150
提交
取消