纯CSS实现响应式导航菜单折叠的关键是规避三大失效点：display:none无法过渡，需用visibility+opacity+max-height组合；height:auto不可动画，须以足够但不过大的max-height值替代；:checked~.nav-menu失效主因DOM顺序错位，input必须紧邻且前置于目标元素。
纯 CSS 实现响应式导航菜单折叠，关键不是“能不能”，而是“怎么避免常见失效点”——display: none 切换无法过渡、height: auto 不能动画、~ 兄弟选择器因 DOM 顺序错位而失灵，这三类问题占了 80% 以上的调试时间。
为什么 display: none → block 没有动画效果
CSS 的 transition 只对可计算数值的属性生效，display 是离散状态（none / block / flex 等），浏览器不插值，硬加 transition 完全无效。强行写只会让菜单“闪现”，毫无过渡感。
- 正确做法是用
visibility+opacity+max-height组合控制显隐 -
max-height设为一个安全上限值（如max-height: 300px），必须大于菜单实际高度，否则内容被截断 -
overflow: hidden必须始终存在，否则max-height过渡会漏出内容 - 别设
max-height: 9999px：动画会拖沓，且在低性能设备上卡顿明显
:checked ~ .nav-menu 不生效的 DOM 顺序陷阱
这个选择器依赖 checkbox 在目标元素之前，且中间不能有非兄弟关系的包裹层干扰。一旦 DOM 顺序或层级错位，样式就完全不触发。
- ✅ 正确结构：
<input id="nav-toggle" type="checkbox"><label for="nav-toggle">☰</label><nav class="nav-menu">...</nav> - ❌ 错误结构：
<label for="nav-toggle">☰</label><input id="nav-toggle" type="checkbox">...</nav>（~选不到后面的.nav-menu） - ❌ 错误结构：
<div><input></div><nav>...</nav>（input和nav不是同级兄弟） - 隐藏
input推荐用position: absolute; clip: rect(0 0 0 0);，比opacity: 0更稳妥，避免 iOS Safari 上焦点残留导致点击失效
移动端旋转屏幕后菜单状态不同步怎么办
CSS 本身无法监听 orientationchange 或窗口 resize 后重置 checkbox 状态，纯 CSS 方案在此场景下必然脱节——比如横屏展开菜单后切回竖屏，菜单仍保持展开，遮挡内容。
立即学习“前端免费学习笔记（深入）”；
- 这是纯 CSS 折叠方案的固有边界，不是 bug，是能力限制
- 若需严格同步，必须加极简 JS：
window.addEventListener('orientationchange', () => document.getElementById('nav-toggle').checked = false) - 只在检测到
screen.orientation变化或matchMedia断点切换时重置，不轮询、不侵入原有逻辑 - 别试图用
@media (orientation: portrait)覆盖:checked：媒体查询无法覆盖用户交互产生的状态
真正难的不是写出能动的菜单，而是预判它在哪种设备、哪种操作路径下会“看起来没动”——DOM 顺序、max-height 估算偏差、旋转状态残留，这三个点漏掉任何一个，用户第一眼就会觉得“这菜单卡了”。
