我正在嘗試設(shè)置可折疊的 div。它們工作正常，但是當(dāng)我打開(kāi)另一個(gè)可折疊 div 時(shí)，打開(kāi)的 div 不會(huì)關(guān)閉，除非我手動(dòng)將它們一一關(guān)閉。如何在打開(kāi)另一個(gè) div 時(shí)自動(dòng)創(chuàng)建一個(gè)打開(kāi)的可折疊 div？超文本標(biāo)記語(yǔ)言<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 回答
哆啦的時(shí)光機(jī)
TA貢獻(xiàn)1779條經(jīng)驗(yàn) 獲得超6個(gè)贊
在打開(kāi)折疊的 div 之前，您的代碼必須關(guān)閉所有打開(kāi)的 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貢獻(xiàn)1840條經(jīng)驗(yàn) 獲得超5個(gè)贊
人們對(duì)這種方法有很多擔(dān)憂......
關(guān)注點(diǎn)分離，例如單獨(dú)的樣式與模板（CSS 與 HTML）。將所有樣式移至單獨(dú)的 css 文件中。也在 JS 中設(shè)置樣式，而不是使用 CSS 類，您可以在其中添加所需的樣式，例如 maxHeight、padding 等。
不要在代碼中使用語(yǔ)義 HTML。例如，使用詳細(xì)信息作為包裝器，使用摘要作為包裝器的描述，并使用按鈕來(lái)切換 p 內(nèi)容。
根據(jù)
document.getElementsByClassName("collapsible")集合的長(zhǎng)度添加多個(gè)點(diǎn)擊事件，這在性能方面不太好。您可以在 document.body 上添加事件，然后驗(yàn)證單擊的元素是否屬于給定類型并具有給定的類/id。
但是，此時(shí)此刻，您甚至不再需要 JS 來(lái)完成此類功能。您需要做的就是使用details和summary標(biāo)簽，它將以這種手風(fēng)琴方式運(yùn)行。
<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 關(guān)注
- 213 瀏覽
添加回答
舉報(bào)
0/150
提交
取消