侧边栏小屏下点击失效的根本原因是CSS媒体查询与JS类切换的优先级冲突；应避免媒体查询直接设display: none，改用transform或:not(.open)配合类控制显隐，并阻止事件冒泡。
侧边栏在小屏下点开却立刻关闭，或者点了按钮没反应——根本不是 JS 写错了，而是 CSS 媒体查询和类切换的优先级打架了。
为什么 display: none 在媒体查询里会废掉 JS 切换
很多项目写 @media (max-width: 1230px) { .sidebar { display: none; } }，以为“隐藏就完事”。但问题在于：这个规则是强制覆盖，JS 给元素加 .d-none 或删 .d-none 都没用，因为 display: none 来自更高优先级的媒体查询规则，类里的 display: block 直接被压死。
- 正确做法是媒体查询只管「默认状态」，比如小屏下
.sidebar { left: -250px; }，而不是直接设display: none - 显隐逻辑交给 class 控制：
.sidebar.open { left: 0; }，JS 只负责classList.toggle('open') - 如果非要用
display，媒体查询里得写成.sidebar:not(.open) { display: none; }，否则无法被 JS 覆盖
click 事件冒泡导致菜单点一下就收起
点击菜单项（比如 <a> 或 <button>）后侧边栏自动关闭，是因为事件从内部元素一路冒泡到 document，触发了全局监听的关闭逻辑。
- 必须在所有可点击子元素的 handler 里加
e.stopPropagation() - 更稳妥的做法是：给
.sidebar容器本身绑定click，并在 handler 开头就e.stopPropagation()，一劳永逸 - 别只拦按钮——
<input type="checkbox">、<label>、甚至带onclick的<div>都要统一处理
纯 CSS 方案里 :checked + ~ 为什么菜单不出现
用复选框 + :checked + ~ 实现零 JS 切换时，菜单不显示，大概率是 HTML 结构或定位出错，不是选择器写错了。
立即学习“前端免费学习笔记（深入）”；
-
<input type="checkbox" id="sidebar-toggle">和<label for="sidebar-toggle">必须同级，且共同包裹在同一个position: relative容器里 - 侧边栏元素必须紧跟在
input后面，且用input:checked ~ .sidebar或input:checked + .sidebar才能命中 -
.sidebar自身要设position: absolute，并配top: 100%或left: 0，不能依赖父容器流式布局 - 如果用了
hidden属性或opacity: 0，记得同步控制pointer-events: none，否则点击无效
最常被忽略的是：移动端侧边栏的显隐必须和视口宽度解耦——媒体查询只决定「初始状态」，JS 或 CSS 状态（如 :checked）才决定「运行时状态」。混用 display 和 transform 动画、漏截冒泡、结构错位，三个地方任一出错，整个切换就卡死。
