本文介绍使用现代 javascript 和 css 实现点击按钮切换内容块显隐状态的标准方法，避免动态创建 dom 元素带来的逻辑缺陷，提升代码可维护性与性能。
在前端交互开发中，「点击按钮显示/隐藏内容」是一个高频需求。原始代码试图每次点击都动态创建 <div> 并手动控制 display 样式，但存在多个关键问题：
- qBtn !== true 的判断逻辑错误（按钮元素永远不等于布尔值 true）；
- qTextShow 在函数作用域内声明，每次调用 ifElse 时无法复用，导致重复追加或引用失效；
- 动态创建 DOM 元素增加了复杂度，且未做重复插入防护，易引发 DOM 结构混乱。
✅ 推荐做法是分离结构、样式与行为：
- HTML 中预先定义内容块，并默认隐藏；
- CSS 提供 .hidden 工具类，统一控制 display: none；
- JavaScript 仅负责切换类名，语义清晰、性能高效、易于维护。
示例实现如下：
<!-- HTML --> <div id="info-q" class="hidden"> 这是问题的答案内容，支持 HTML 标签，例如 <strong>加粗文本</strong>。 </div> <button id="question-btn">❓ 展开/收起答案</button>
/* 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 技巧实现展开收缩动效。
该方案结构清晰、兼容性强（支持所有现代浏览器），是构建可扩展交互组件的坚实基础。
