一键控制内容显示隐藏技巧分享

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

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

1. HTML 中预先定义内容块，并默认隐藏；
2. CSS 提供 .hidden 工具类，统一控制 display: none；
3. 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 技巧实现展开收缩动效。

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

理论要掌握，实操不能落！以上关于《一键控制内容显示隐藏技巧分享》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！