按钮在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

原来我没有正确理解这个问题。问题是，您正在从remove()函数中的所有内容div中删除show类。然后，将show类再次添加到相应的contentdiv中，这实际上并没有切换内容。

简单的修复。在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>