17370845950

本文介绍使用现代 javascript 和 css 实现点击按钮切换内容块显隐状态的标准方法，避免动态创建 dom 元素带来的逻辑缺陷，提升代码可维护性与性能。

在前端交互开发中，「点击按钮显示/隐藏内容」是一个高频需求。原始代码试图每次点击都动态创建

• qBtn !== true 的判断逻辑错误（按钮元素永远不等于布尔值 true）；
• qTextShow 在函数作用域内声明，每次调用 ifElse 时无法复用，导致重复追加或引用失效；

• 动态创建 DOM 元素增加了复杂度，且未做重复插入防护，易引发 DOM 结构混乱。

✅ 推荐做法是分离结构、样式与行为：

1. HTML 中预先定义内容块，并默认隐藏；
2. CSS 提供 .hidden 工具类，统一控制 display: none；
3. JavaScript 仅负责切换类名，语义清晰、性能高效、易于维护。

示例实现如下：

  这是问题的答案内容，支持 HTML 标签，例如 加粗文本。

❓ 展开/收起答案

/* CSS */
.hidden {
  display: none;
}

// JavaScript
const infoBlock = document.getElementById('info-q');
const toggleBtn = document.getElementById('question-btn');

toggleBtn.addEventListener('click', () => {
  infoBlock.classList.toggle('hidden');
});

? 注意事项：

• 避免使用 style.display = 'none' / 'block' 直接操作内联样式——它会覆盖其他 CSS 规则，且难以统一管理；
• classList.toggle() 是原子操作，自动判断并切换类存在状态，比手动 if/else + add/remove 更简洁可靠；
• 若需过渡动画（如淡入淡出），可配合 opacity 和 transition，但注意：display: none 不参与动画，建议改用 visibility: hidden + opacity 组合，或使用 max-height 技巧实现展开收缩动效。

该方案结构清晰、兼容性强（支持所有现代浏览器），是构建可扩展交互组件的坚实基础。