第一反应不是JS写错，而是监听目标错误：常见将click事件绑在window/document却未判断target，或绑在未定义变量（如e）上；应确认按钮存在、选择器正确、DOM加载完成后再绑定，且CSS类名与选择器严格匹配。
document.addEventListener('click') 绑错对象了
侧边栏按钮点不动，第一反应不是JS写错了，而是监听目标压根不是按钮本身。常见错误是把事件绑在 window 或 document 上却没做 event.target 判断，或者更糟——绑在了一个根本不存在的变量上（比如 e.addEventListener 中的 e 未定义）。
检查方法很简单：打开控制台，在 Console 里直接运行 document.getElementById('sidebar-toggle')，看是否返回元素。如果返回 null，说明选择器写错或元素还没加载出来。
- 确保按钮有唯一
id（如id="sidebar-toggle"），避免用getElementsByClassName返回集合后直接调用addEventListener - 脚本必须在 DOM 加载完成后执行：要么放
</body>前，要么用document.addEventListener('DOMContentLoaded', ...)包裹 - 别在
head里写内联 JS 并试图操作尚未解析的按钮——此时querySelector一定返回null
侧边栏 toggle 类名切换但 CSS 不生效
JS 看似运行了（console.log 能打出来），按钮也加了 active 类，但侧边栏就是不展开——大概率是 CSS 选择器没匹配上。
典型陷阱：.sidebar.open 和 .sidebar .open 表示完全不同的含义。前者要求同一个元素同时带两个 class，后者是后代关系。如果 JS 是给 <aside class="sidebar"> 加 open，那 CSS 必须写成 .sidebar.open 才生效。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器 Elements 面板确认按钮点击后，目标元素（如
<aside>）是否真的被加上了预期 class - 检查 CSS 是否拼写错误：比如
vh写成hv，或transform属性被其他规则覆盖 - 注意层叠上下文：父容器若设了
overflow: hidden或position: relative配合z-index，可能把侧边栏裁掉或压在底层
动态替换内容后事件监听器丢失
页面用了 innerHTML 或 replaceChildren 更新区域，侧边栏按钮跟着一起被删了又重建——旧的事件监听器不会自动复活。
这不是“JS 没写对”，而是“JS 只绑了一次，但 DOM 已换人”。尤其在单页应用或分页场景下，这个坑非常隐蔽。
- 不要依赖一次性绑定；改用事件委托：把监听器挂在父容器（如
document或#app），用event.target.closest('#sidebar-toggle')判断是否点中目标 - 如果必须重新渲染整个侧边栏结构，就在渲染完后立刻调用一次初始化函数（如
initSidebarToggle()）重新绑定 - 避免在 HTML 里写
onclick="toggleSidebar()"—— 这种内联写法在 DOM 替换后会彻底失效
pointer-events: none 或遮罩层挡住了点击
按钮能看见、能 hover、甚至能选中文字，但就是点不了——十有八九是 pointer-events: none 在作祟，或者有个透明 div 盖在上面。
这种问题在加了加载遮罩、模态框、或响应式断点切换时特别容易出现。CSS 里一个 pointer-events: none 就能让整块区域变“玻璃”。
- 右键按钮 → “检查”，在 Styles 面板里搜
pointer-events，看是否被设为none - 查看按钮的 computed 样式，确认
z-index是否足够高；父容器有没有overflow: hidden导致按钮实际可点区域被剪裁 - 临时禁用所有 CSS，看按钮是否恢复响应——如果恢复了，问题就出在样式层，不是 JS
