本文介绍使用原生 javascript 和 css 类名切换的方式，实现点击按钮后动态显示或隐藏指定内容块，避免重复创建 dom 元素，提升性能与可维护性。
在前端开发中，常见的交互需求是“点击一次显示内容，再点击则隐藏”，即状态切换（toggle）。原始代码的问题在于：每次点击都用 document.createElement() 创建新元素，且 if(qBtn !== true) 的判断逻辑无效（qBtn 是一个 DOM 元素对象，永远不等于布尔值 true），导致无法正确识别当前显示/隐藏状态，也无法移除已插入的内容。
✅ 推荐方案：预定义 HTML 结构 + CSS 控制显隐 + classList.toggle() 实现状态切换
这种方式语义清晰、性能高效、易于维护，且完全避免了动态创建/销毁 DOM 的开销。
✅ 正确实现步骤
-
HTML 中预先写好内容块和按钮，并为内容块添加初始隐藏类（如 hidden）：
<div id="info-q" class="hidden"> 这里是要显示或隐藏的说明文字。 </div> <button id="question-btn">❓ 展开/收起问题说明</button>
-
CSS 定义 .hidden 类控制不可见（推荐使用 display: none，确保彻底脱离文档流）：
.hidden { display: none; } -
JavaScript 绑定点击事件，仅切换类名：
document.getElementById('question-btn').addEventListener('click', () => { document.getElementById('info-q').classList.toggle('hidden'); });
? 提示：classList.toggle('hidden') 会自动判断元素是否已有该类——有则移除，无则添加，完美匹配“显示/隐藏”切换逻辑。
⚠️ 注意事项
- 不要使用 element.style.display = 'none' 配合 element.style.display = 'block' 手动切换，这会覆盖内联样式，且难以与其他 CSS 规则协同；
- 若需过渡动画（如淡入淡出），可配合 opacity 和 transition，但注意 display: none 无法过渡，此时应改用 visibility: hidden + opacity，或使用 max-height 技巧；
- 确保 ID 唯一且拼写一致（如 info-q 与 getElementById('info-q') 必须完全匹配）；
- 如需支持多个独立折叠项，可使用 data-target 属性关联按钮与目标元素，实现复用逻辑。
✅ 扩展：支持多组独立折叠项（简洁版）
<button class="toggle-btn" data-target="#faq1">Q1：什么是前端？</button> <div id="faq1" class="hidden">A1：前端是用户直接交互的网页界面部分...</div> <button class="toggle-btn" data-target="#faq2">Q2：JS 是什么？</button> <div id="faq2" class="hidden">A2：JavaScript 是一门运行在浏览器中的脚本语言...</div>
document.querySelectorAll('.toggle-btn').forEach(btn => {
btn.addEventListener('click', () => {
const targetId = btn.dataset.target;
document.querySelector(targetId).classList.toggle('hidden');
});
});综上，摒弃运行时动态创建 DOM 的做法，转而采用声明式 HTML + 类名驱动的控制方式，不仅代码更简洁可靠，也更符合现代 Web 开发的最佳实践。
