点击按钮内容不显示时，应避免硬设 display='block'，优先存取原始 display 值或用 'initial'；推荐用 toggleAttribute('hidden') 配合 [hidden]{display:none!important} 实现语义化、可访问的显隐控制。
点击按钮后内容不显示，检查 display 切换逻辑是否正确
最常见的问题是用 style.display = 'none' 隐藏后，点击时赋值成了 'block'，但目标元素原本是 <p></p> 或 <div> 以外的标签（比如 <code><span></span>），它默认不是块级元素，'block' 虽能生效，但若父容器有 flex 布局或设置了 display: grid，就可能被忽略。更稳妥的做法是存原始 display 值，或统一用 'initial' 回退：
- 首次隐藏时记录原始值：
el.dataset.originalDisplay = getComputedStyle(el).display - 切换时优先用
el.style.display = el.style.display === 'none' ? el.dataset.originalDisplay || 'inline' : 'none' - 避免硬写
'block'——除非你确定目标是块级容器且无 CSS 覆盖
用 toggleAttribute + CSS 控制显隐更可靠
纯 CSS 方案比 JS 操控 style.display 更稳定，尤其适合多状态、需过渡动画的场景。核心是用 hidden 属性配合 CSS 规则：
button { cursor: pointer; }
[hidden] { display: none !important; }JS 只需一行切换：
document.querySelector('button').addEventListener('click', () => {
document.querySelector('#target').toggleAttribute('hidden');
});-
toggleAttribute('hidden')比classList.toggle()更语义化，且原生支持可访问性（屏幕阅读器会跳过hidden元素） - 不要用
visibility: hidden替代——它仍占布局空间，用户可能误点空白区域 - 若需淡入淡出，搭配
transition: opacity .2s和opacity控制，但注意hidden会强制display: none，所以得改用aria-hidden+opacity+pointer-events
多个按钮控制同一内容，注意事件绑定范围
如果页面里有多个按钮都要展开/收起同一个 #info 区域，别给每个按钮单独写重复的 addEventListener，容易漏绑或内存泄漏：
立即学习“前端免费学习笔记（深入）”；
- 用事件委托：在公共父容器上监听，判断
e.target.matches('.js-toggle-btn') - 确保所有按钮都有唯一标识，比如统一加
data-target="#info"，JS 里取e.target.dataset.target动态获取目标元素 - 避免在循环里直接写
for (let i = 0; i ——闭包问题会导致所有按钮操作最后一个 <code>i对应的元素
移动端点击无响应，检查是否有 pointer-events: none 干扰
某些 UI 框架（如 Tailwind 的 invisible 类）或重置样式会全局设置 * { pointer-events: none }，导致按钮无法触发 click。排查步骤：
- 右键检查按钮 → 查看 computed 样式中
pointer-events是否为none - 临时加内联样式测试：
<button style="pointer-events: auto"> - 注意 Safari 对
touchstart的兼容处理——如果用了preventDefault()却没配cursor: pointer，iOS 上可能点击无反馈
真正麻烦的不是怎么写，而是你改了 JS 却发现是 CSS 的 z-index 把按钮盖住了，或者父层加了 overflow: hidden 切掉了点击热区——先开开发者工具 hover 检查，再动代码。
