如何实现按钮点击切换div的显示与隐藏（默认隐藏）？

当然可以用同一个按钮实现点击切换Div显示/隐藏的效果，而且有比计数点击次数更简洁直接的实现方式，下面给你两种常用方案：

方案1：直接判断当前显示状态切换 #

不需要额外变量，每次点击时检查Div当前的display属性，直接切换为相反状态：

修改后的JS代码：

const button = document.getElementById("menu");
const menu = document.querySelector(".box");
button.addEventListener("click", function () {
  // 三元运算符判断当前状态，切换显示/隐藏
  menu.style.display = menu.style.display === "block" ? "none" : "block";
});

你的HTML和CSS代码可以保持不变，因为默认已经设置.box为display: none。

方案2：使用CSS类切换（更推荐） #

这种方式将样式逻辑完全放在CSS中，JS只负责切换类名，符合关注点分离的原则，后续修改样式也更灵活：

修改后的CSS代码： #

.box{
  height: 200px;
  width: 200px;
  display: none;
}
/* 新增active类控制显示 */
.box.active {
  display: block;
}

对应的JS代码： #

const button = document.getElementById("menu");
const menu = document.querySelector(".box");
button.addEventListener("click", function () {
  // 使用classList.toggle一键切换类
  menu.classList.toggle("active");
});

这两种方案都比计数点击次数的方法更简洁高效，不需要维护额外的计数器变量，逻辑也更清晰。

内容的提问来源于stack exchange，提问作者mark