Javascript 如何使用click event listener使按钮切换显示？

我有大约20种产品，每种产品都有一个按钮和说明框。我添加了一个点击事件监听器，在点击按钮后显示产品描述框

如何使按钮也能够隐藏描述框（即切换显示）

这是我的密码：

const descriptionBtn = document.querySelectorAll('.desc-btn');

descriptionBtn.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    descriptionBox = btn.nextElementSibling;
    descriptionBox.style.display = "block";
  });
});

---

您可以简单地在框中切换一个类。创建一个包含：display:block的css类。然后在框的类列表中切换该类

.show{display:block;}

const descriptionBtn = document.querySelectorAll('.desc-btn');

descriptionBtn.forEach((btn)=>{
  btn.addEventListener('click', (e)=>{
    descriptionBox = btn.nextElementSibling;
    descriptionBox.classList.toggle("show");
  });
});

---

可以使用按钮单击处理程序在描述文本上切换类以切换其可见性。完整工作示例：

const descBtns=document.queryselectoral（'.desc btn'）；
descBtns.forEach（（btn）=>{
btn.addEventListener（'单击'，（e）=>{
descText=btn.nextElementSibling；
descText.classList.toggle（'show'）；
});
});
.desc btn{
显示：块；
边缘底部：10px；
}
.描述{
显示：无；
}
.desc.show{
显示：块；
}
desc-btn
此处有说明
描述btn 2
此处描述2
描述btn 3
description here 3
您可以使用第三级操作符询问当前是否显示该框。如果是，块将设置为隐藏，如果不是，则将设置为显示块。这是其他JS框架中常见的设计模式，因此可能值得尝试

const descriptionBtn = document.querySelectorAll('.desc-btn');

descriptionBtn.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    descriptionBox = btn.nextElementSibling;
    descriptionBox.style.display === "block" ? discriptionBox.style.display = 'hidden' :
      discriptionBox.style.display = 'block'
  });
});

为类为“隐藏背景”、“显示背景”的按钮添加两个事件侦听器。单击任意元素时，将元素类更改为另一个

.show-background div{ display:block};
.hide-background div{ display:none};

.show-background div{ display:block};
.hide-background div{ display:none};


const showBgnd = document.getElementsByClassName('show-background');
const hideBgnd = document.getElementsByClassName('hide-background');

showBgnd.addEventListener('click', (e)=>{
  showBgnd.setAttribute("class","hide-background");
});

hideBgnd.addEventListener('click', (e)=>{
  hideBgnd.setAttribute("class","show-background");
});