点击按钮时nav元素不显示或闪退，本质是display切换被其他样式覆盖；应统一用max-height+overflow:hidden替代纯display切换，确保初始样式写在移动断点内，JS改用class切换而非直接操作style.display。
点击按钮时 nav 元素不显示或闪退？检查 display 切换逻辑是否被其他样式覆盖
移动端折叠导航本质是用 JavaScript 控制 display 或 visibility，但常见问题是 CSS 优先级导致切换失效。比如父容器设置了 overflow: hidden，而展开后子元素高度撑开却不可见；或多个媒体查询中 display: none 被低优先级规则覆盖。
实操建议：
- 统一用
max-height+overflow: hidden替代纯display切换，便于加 CSS 过渡动画 - 确保折叠状态的初始样式写在移动断点内（如
@media (max-width: 768px)），而非全局作用域 - JavaScript 中不要直接写
el.style.display = 'block'，改用 class 切换（如el.classList.toggle('is-open')），避免内联样式劫持
transform: translateX() 比 left 更适合侧滑菜单？确实，但得配 will-change
侧滑式导航栏常用 transform: translateX(-100%) 隐藏，translateX(0) 展开。它比用 left 定位更高效，因为不触发重排（reflow），只走合成层。
但要注意：
立即学习“前端免费学习笔记（深入）”；
- 必须给滑动容器设置
position: fixed或absolute，否则transform不会脱离文档流 - 为启用 GPU 加速，在展开态加
will-change: transform（仅在需要时设，避免滥用） - 若菜单内容高过视口，需同时控制
height: 100vh和overflow-y: auto，否则滚动失效
如何让汉堡图标（☰）随菜单状态旋转 90°？用 transition + rotate() 最稳妥
图标旋转不是装饰，而是用户感知状态的关键反馈。直接对 <span> 或伪元素做 transform: rotate(90deg) 即可，但必须和菜单展开 class 同步切换。
关键细节：
- 旋转基点默认是中心，若图标不对齐，加
transform-origin: center - 过渡要写在未展开态上（如
.hamburger { transition: transform 0.3s ease; }），否则首次点击无动画 - 避免用
rotate(0deg)→rotate(90deg)，改用 class 控制：比如.hamburger.is-active { transform: rotate(90deg); }
iOS Safari 下触摸穿透（click-through）怎么破？pointer-events: none 不是万能解
折叠菜单展开时，背后页面仍可点击（比如误触 footer 链接），这是 iOS Safari 的经典穿透问题。单纯给背景加 pointer-events: none 会阻断所有交互，包括滚动。
真正有效的做法：
- 菜单展开时，给
<body>加 class（如menu-open），再设body.menu-open { overflow: hidden; height: 100vh; } - 同时给遮罩层（overlay）设
pointer-events: auto，并确保其 z-index 高于页面内容、低于菜单本身 - 不用
touch-action: manipulation，它会禁用双指缩放，影响可访问性
body 上的锁定 class，并恢复 overflow 和 height —— 否则回到页面顶部后无法滚动，用户会以为页面卡死。** 
