javascript 中的按钮 show/hide 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，但是当我第二次点击它时，我想要 [=26] =] 关闭，但它不会

Answer 1

为了实现您正在寻找的内容，您必须稍微更改一下逻辑。基本上，您必须为与单击的按钮相对应的内容切换 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>

Answer 2

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

简单修复。在 remove() 函数中，如果 div 已经存在，则仅删除 show class。这是 fiddle https://jsfiddle.net/sap4bn8d/

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

javascript 中的按钮 show/hide div，切换不起作用

Button show/hide div in javascript, toggle not working

html

javascript

css

button

show