打开时，一个内容如何折叠其他内容

Question

我有下面的代码，我曾经点击特定的button来显示或隐藏内容，它成功地工作了，但这不是我想要的，而且当一个内容出现在open上时，我也想要open，这意味着如果我显示其中一个内容并试图显示另一个内容，第二个内容将导致第一个内容崩溃但我失败了，我怎么能做到。

我的代码

var coll = document.getElementsByClassName("colps");
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
coll[i].innerHTML = 'open';
} else {
content.style.display = "block";
coll[i].innerHTML = 'close';
}
});
}

.container {
width: 30%;
}
.colps {
background-color: lightblue;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
outline: none;
font-size: 15px;
}
.active,
.colps:hover {
background-color: dodgerblue;
}
.cont {
padding: 10px;
margin: 0;
display: none;
background-color: #f1f1f1;
}

<div class="container">
<button type="button" class="colps">open</button>
<p class="cont">Lorem ipsum dolor sit amet</p>
<button type="button" class="colps">open</button>
<p class="cont">Lorem ipsum dolor sit amet</p>
<button type="button" class="colps">open</button>
<p class="cont">Lorem ipsum dolor sit amet</p>
</div>

我试着自己解决了很多问题和答案，但我没有找到解决方案，我正在寻求任何帮助。

Answer 1

您可以尝试如下。我使用了嵌套的forEach，当单击按钮时，我折叠了所有其他按钮。

var coll = document.querySelectorAll(".colps");

coll.forEach(p => {
p.addEventListener("click", function(e) {
coll.forEach(p2 => {
p2.nextElementSibling.style.display = "none";
p2.innerHTML = 'open';
});

p.classList.toggle("active");
var content = p.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
p.innerHTML = 'open';
} else {
content.style.display = "block";
p.innerHTML = 'close';
}
});
});

.container {
width: 30%;
}
.colps {
background-color: lightblue;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
outline: none;
font-size: 15px;
}
.active,
.colps:hover {
background-color: dodgerblue;
}
.cont {
padding: 10px;
margin: 0;
display: none;
background-color: #f1f1f1;
}

<div class="container">
<button type="button" class="colps">open</button>
<p class="cont">Lorem ipsum dolor sit amet</p>
<button type="button" class="colps">open</button>
<p class="cont">Lorem ipsum dolor sit amet</p>
<button type="button" class="colps">open</button>
<p class="cont">Lorem ipsum dolor sit amet</p>
</div>