直接用 .nav-menu.active 控制显示会失效，因未处理默认隐藏和断点约束：移动端需默认 display: none，.active 必须嵌套在 @media (max-width: 768px) 内生效，且避免类名混用与 DOM 依赖。
为什么直接用 .nav-menu.active 控制显示会失效
常见错误是只写 .nav-menu.active { display: flex; }，却没处理「默认隐藏」和「断点约束」两个前提。移动端菜单必须默认不可见，否则小屏下会先闪出再消失；而桌面端又不能被 .active 干扰——否则点击汉堡按钮后，在大屏上也会展开，违背“仅小屏折叠”的语义。
真正要做的，是把状态类名嵌套进媒体查询作用域里：
-
@media (max-width: 768px) { .nav-menu.active { display: flex; } }—— 确保.active只在小屏生效 -
.nav-menu { display: none; }必须写在媒体查询外（或设为初始状态），否则大屏下也隐藏了 - 别把
.active和.is-open混用：统一用一个类名，避免 JS 切换时漏掉某处
@media 内部嵌套类选择器的写法陷阱
SCSS 支持在 @media 块内直接嵌套类选择器，但容易忽略编译结果是否符合预期。比如这样写：
@media (max-width: 768px) {
.nav-toggle {
& + .nav-menu {
display: none;
&.active {
display: flex;
}
}
}
}
它生成的是 @media (max-width: 768px) .nav-toggle + .nav-menu.active，看起来没问题，但实际中常因 DOM 结构微调（比如中间插入了 <div>）导致选择器失效。
立即学习“前端免费学习笔记（深入）”；
更稳的做法是：
- 用属性选择器替代兄弟选择器：
input[type="checkbox"]:checked ~ .nav-menu更鲁棒 - 如果必须用类控制，就把状态类加在父容器上：
.nav-container.active .nav-menu，避免依赖 DOM 邻居关系 - 禁止在
@media块里嵌套多层&，尤其带伪类时（如&:hover &.active），编译后选择器权重可能失控
如何让 .active 类在断点变化时自动退出
用户旋转手机从竖屏（320px）切到横屏（568px），菜单不该还开着——这需要 CSS 主动响应，而不是等 JS 再判断一次。纯 CSS 能做到，但得靠「断点覆盖优先级」设计：
- 先定义小屏激活规则：
@media (max-width: 48em) { .nav-menu.active { display: flex; } } - 再定义中屏及以上强制关闭：
@media (min-width: 48.01em) { .nav-menu.active { display: none !important; } } - 注意
48em是 768px / 16，而48.01em是为避开 Safari 对相等值的解析歧义 - 不推荐用
!important，但此处是唯一能确保断点切换时「强制覆盖」的手段；若不用，浏览器可能缓存旧样式导致菜单卡住
JS 切换 .active 类时的 DOM 同步问题
点击汉堡按钮后菜单没反应，大概率不是 CSS 问题，而是 JS 操作的节点不对。比如：
- HTML 中
.nav-menu是<ul>，但 JS 写成document.querySelector('.nav-menu').classList.toggle('active')—— 表面没错，可如果页面有多个.nav-menu（比如侧边栏也有），就切错了目标 - 用
closest()锁定上下文：event.target.closest('.nav-container').querySelector('.nav-menu').classList.toggle('active') - 别在
click外层套setTimeout延迟加类——现代浏览器对 classList 操作是同步的，延迟反而导致动画不同步 - 检查是否用了
pointer-events: none在父层遮挡了点击，尤其是用transform: translateX(-100%)隐藏侧边栏时，未重置该属性会导致按钮失活
最易被忽略的一点：状态类名的语义必须和断点逻辑对齐。.active 不代表“已打开”，而应代表“当前设备允许打开且用户已触发”——这意味着它的存在本身就要受媒体查询节制，不能脱离上下文独立生效。
