我正在尝试设置可折叠的 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 关注
- 85 浏览
添加回答
举报
0/150
提交
取消