时间戳

首页 > 解决方案 > 按钮在javascript中显示/隐藏div，切换不起作用

javascript - 按钮在javascript中显示/隐藏div，切换不起作用

问题描述

我有这个 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 关闭，但它没有

标签： javascripthtmlcssbuttonshow

解决方案

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

简单的修复。在函数内部，仅当 div 已经拥有该类remove()时才删除该类。show这是一个小提琴 https://jsfiddle.net/sap4bn8d/

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

推荐阅读