如何用CSS实现移动端导航菜单折叠

用 max-height + overflow: hidden + transition 实现折叠动画更平滑兼容，因 height: auto 无法插值导致跳变；需设足够但不过大的 max-height 值（如 260px），配 overflow: hidden；媒体查询推荐 min-width 且只覆盖关键样式；JS 切换时注意 body 滚动、触控区域和 focus 状态。

直接用 max-height + overflow: hidden + transition 实现折叠动画，比切 display 更平滑、兼容性更好，也更容易控制过渡节奏。

为什么不能用 height: auto 做过渡

浏览器无法对 height: auto 进行动画插值——它不是确定数值，transition 会直接跳变。常见错误是写成：

.nav-menu { transition: height 0.3s; }.nav-menu.open { height: auto; }

结果就是：收起时瞬间消失，展开时无动画。必须换思路。

1. max-height 是可动画的数值属性，设为 0 和一个足够大的固定值（如 300px），就能触发渐变效果
2. 这个“足够大”的值要略大于菜单实际高度；5 个项 × 48px ≈ 240px，设 max-height: 260px 比设 9999px 更自然
3. 必须配 overflow: hidden，否则内容会在过渡过程中溢出

@media 断点该写 min-width 还是 max-width

推荐统一用 @media (min-width: 768px) 控制桌面端样式，而不是反着写 @media (max-width: 767px)。原因很实际：

1. 旧版 Safari 和部分安卓 WebView 在解析 max-width 媒体查询时可能触发两次重排，导致布局抖动
2. 把桌面端逻辑放在媒体查询里，意味着默认样式是移动端（折叠态），更符合渐进增强逻辑
3. 断点值选 768px（平板竖屏）比 600px 更稳妥——Pixel 4、iPhone 12 等设备宽度接近 390–414px，不会误判为桌面
4. 别在媒体查询里重复整套导航 CSS，只覆盖关键属性：flex-direction、display、margin-left: auto 就够了

JavaScript 切换类名时容易漏掉的细节

用 classList.toggle('open') 看似简单，但几个边界情况常被忽略：

1. 菜单展开时，记得同步设置 document.body.style.overflow = 'hidden' 防止背景滚动；关闭时必须设回空字符串 ''，而不是 'auto'，否则 iOS 可能强制重绘并卡顿
2. 汉堡按钮触控区域至少 44px × 44px，小屏下用 padding 扩展，别只靠字体大小撑空间
3. 避免在 click 事件里调用 event.preventDefault()——它会干掉按钮的焦点状态，影响键盘用户和屏幕阅读器
4. 如果用了 position: fixed 的菜单层，加 touch-action: none，否则某些安卓机型拖拽时底层页面仍会滚动

真正难的不是写出第一版折叠菜单，而是让 max-height 值刚好够用、@media 不在 Safari 失效、JS 切换时不锁死滚动——这些地方没调试到位，用户一上手就卡住。