javascript中的按钮显示/隐藏div，切换无效

Question

我有这个html代码：

<div class="feedback-middle">
  <button id="btn-1" class="bt1"><p class="b1">What is netflix</p></button>
  <div id="btn-1-content" class="aa">ssss</div>

  <button id="btn-2" class="bt1"><p class="b1">What is netflix</p></button>
  <div id="btn-2-content" class="aa">ssss</div>

  <button id="btn-3" class="bt1"><p class="b1">What is netflix</p></button>
  <div id="btn-3-content" class="aa">ssss</div>
</div>

和CSS代码：

#btn-1-content,
#btn-2-content,
#btn-3-content {
  display: none;
}

.show {
  display: block !important;
  height: 100px;
  background: #303030;
  width: 40%;
}

和js代码：

var buttons = document.querySelectorAll(".bt1");
var content = document.querySelectorAll(".aa");

function remove() {
  content.forEach((item) => item.classList.remove("show"));
}

buttons.forEach((item) =>
  item.addEventListener("click", function (e) {
    remove();
    const contents = document.querySelector(`#${this.id}-content`);
    contents.classList.toggle("show");
  })
);

因此，这个问题是，当我第一次单击该按钮时，我在下面打开了div，但是当我第二次单击它时，我希望div关闭，但它没有

Answer 1

事实证明，我对问题的理解不正确。问题是，您正在从show函数中的所有内容div中删除remove()类。然后，将show类再次添加到相应的内容div中，该div实际上并不切换内容。

简单修复。在remove()函数内部，仅在div已存在的情况下才删除show类。这是一个小提琴https://jsfiddle.net/sap4bn8d/

更新如果已经显示相应的内容，我们忘记删除show类。解决方法是：https://jsfiddle.net/sap4bn8d/1/

Answer 2

为了实现您想要的功能，您必须稍微改变一下逻辑。基本上，您必须为与单击的按钮相对应的内容切换show，然后必须从与按钮没有相同ID的内容中删除所有show。 >

请参阅下面的代码段，现在关闭所有内容，但未单击的内容关闭。如果恰好再次单击同一按钮，它将切换其内容。

var buttons = document.querySelectorAll(".bt1");
var contents = document.querySelectorAll(".a");

buttons.forEach((item) =>
  item.addEventListener("click", function(e) {
    const content = document.querySelector(`#${this.id}-content`);
    content.classList.toggle("show");

    contents.forEach((item) => {
      if (!item.id.startsWith(this.id)) {
        item.classList.remove("show");
      }
    });
  })
);
#btn-1-content,
#btn-2-content,
#btn-3-content {
  display: none;
}

.show {
  display: block !important;
  height: 100px;
  background: #ccc;
  width: 40%;
}
<div class="feedback-middle">
  <button id="btn-1" class="bt1"><p class="b1">What is netflix</p></button>
  <button id="btn-2" class="bt1"><p class="b1">What is netflix</p></button>
  <button id="btn-3" class="bt1"><p class="b1">What is netflix</p></button>
</div>
<div id="btn-1-content" class="a">A</div>
<div id="btn-2-content" class="a">B</div>
<div id="btn-3-content" class="a">C</div>