我正在尝试设置可折叠的div。它们工作正常，但是当我打开另一个可折叠div时，除非我手动将它们一个个关闭，否则打开的div不会关闭。
[打开一个不同的div时如何自动创建一个可折叠的div？
HTML
<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>
JS
var 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";
}
});
}
在打开折叠的div之前，您的代码必须关闭所有打开的div。
function closeOpenDivs () {
const collapsibles = document.getElementsByClassName('collapsible');
console.log('collapsibles:', collapsibles);
for (const collapsible of collapsibles) {
if (collapsible.classList.contains('active')) {
collapsible.classList.remove('active');
var content = collapsible.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
}
}
}
工作示例：
function closeOpenDivs () {
const collapsibles = document.getElementsByClassName('collapsible');
for (const collapsible of collapsibles) {
if (collapsible.classList.contains('active')) {
collapsible.classList.remove('active');
var content = collapsible.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
}
}
}
var coll = document.getElementsByClassName('collapsible');
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function () {
closeOpenDivs();
this.classList.toggle('active');
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
});
}.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;
padding:
}<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>