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

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

并手动控制 display 样式，但存在多个关键问题：

• qBtn !== true 的判断逻辑错误（按钮元素永远不等于布尔值 true）；
• qTextShow 在函数作用域内声明，每次调用 ifElse 时无法复用，导致重复追加或引用失效；
• 动态创建 DOM 元素增加了复杂度，且未做重复插入防护，易引发 DOM 结构混乱。

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

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

示例实现如下：

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

<!-- 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 技巧实现展开收缩动效。

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