打开[复制]时，一个内容如何折叠其他内容

Question

我有下面的代码，我过去经常点击特定的按钮来显示或隐藏内容，它成功地工作了，但这不仅仅是我想要的，而且当一个内容显示时，我想要的也不可能是另一个打开，这意味着如果我显示其中一个内容并试图显示另一个内容，第二个内容将导致第一个内容显示自动崩溃，但我失败了，我怎么能做到呢。

我的代码

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，当单击按钮时，我折叠了所有其他按钮。

js prettyprint-override">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>