如何实现点击单按钮切换区块显隐？修复现有代码仅显不隐问题

你的代码存在两个核心问题导致无法隐藏区块：

• 判断条件错误：qBtn !== true完全不成立，因为qBtn是DOM元素对象，永远不会等于布尔值true，所以每次点击都会执行if分支，永远走不到else的隐藏逻辑。
• 重复创建元素：每次点击都会执行appendChild(qTextShow)，导致多次添加相同元素到DOM中。

修正后的代码方案 #

function questionDisplay() {
  let qBtn = document.querySelector(".question");
  // 提前创建元素并设置基础配置，避免重复操作DOM
  let qTextShow = document.createElement("div");
  qTextShow.className = "info_q";
  qTextShow.innerHTML = `text`;
  qTextShow.style.display = "none"; // 默认隐藏
  qBtn.appendChild(qTextShow); // 仅添加一次到DOM

  qBtn.addEventListener("click", function() {
    // 直接切换display状态：显示则隐藏，隐藏则显示
    qTextShow.style.display = qTextShow.style.display === "block" ? "none" : "block";
  });
}
questionDisplay();

关键改进点 #

• 提前完成元素创建与DOM挂载，避免重复添加子元素
• 移除错误的判断逻辑，通过检查当前display属性值实现状态切换
• 默认设置区块为隐藏，符合常规的点击触发交互逻辑

更简洁的CSS类切换方案（推荐） #

将样式逻辑剥离到CSS中，JS只负责切换类名，更符合代码分离原则：

.info_q {
  display: none;
}
.info_q.show {
  display: block;
}

function questionDisplay() {
  let qBtn = document.querySelector(".question");
  let qTextShow = document.createElement("div");
  qTextShow.className = "info_q";
  qTextShow.innerHTML = `text`;
  qBtn.appendChild(qTextShow);

  qBtn.addEventListener("click", function() {
    // 用toggle方法一键切换类名
    qTextShow.classList.toggle("show");
  });
}
questionDisplay();

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