浏览器无法对 height: auto 做插值动画，需用 max-height 替代；动态适配高度应通过 JS 获取 scrollHeight 并设为 CSS 变量；媒体查询与变量协同控制开闭状态；移动端需手动监听链接点击收起菜单。
为什么不能用 height: auto 配合 transition 做折叠动画
浏览器无法对 auto 值做插值计算，写了 transition: height 0.3s 也完全不会动。常见错误是设 height: 0 → height: auto，结果点击后菜单瞬间弹出，没有过渡。必须用可动画的确定数值替代 auto。
max-height 过渡怎么动态适配真实菜单高度
硬写死 max-height: 300px 容易出问题：内容少时留白多，内容多时被截断。正确做法是让 max-height 足够大、但又不浪费性能：
- 先用 JS 获取菜单
scrollHeight，再设为 CSS 变量：document.documentElement.style.setProperty('--menu-height', menu.scrollHeight + 'px'); - CSS 中用
max-height: var(--menu-height, 0)，初始状态设--menu-height: 0 - 避免用
calc(var(--menu-height) + 10px)——部分 Safari 对 calc 内变量动画支持不稳定，直接赋值更稳 - 展开时加
overflow: hidden，防止过渡中内容溢出
媒体查询 + CSS 变量如何协同控制折叠开关
纯靠 JS 动态设变量不够鲁棒，小屏下应默认折叠，桌面端默认展开，变量只是微调。关键在作用域和触发时机：
- 在
:root声明基础变量：--menu-height: 0; --menu-open: 0; - 用媒体查询覆盖：
@media (min-width: 768px) { :root { --menu-height: 100vh; --menu-open: 1; } } - JS 只负责切换
--menu-open，CSS 用max-height: calc(var(--menu-open) * var(--menu-height))控制显隐（注意：乘法需单位一致，100vh×1有效，0× 任何值为0） - 别在
.menu类里声明变量——变量必须在祖先节点定义，子元素才能读取
移动端点击后菜单不收起？检查这几个隐藏条件
即使 max-height 动画跑起来了，用户点击链接后菜单仍常卡在展开态。这不是 CSS 问题，而是交互逻辑缺失：
立即学习“前端免费学习笔记（深入）”；
- 导航链接
<a>默认不触发 checkbox 或 JS 的收起逻辑，得手动监听：menu.addEventListener('click', e => { if (e.target.tagName === 'A') toggleMenu(false); }); - 如果用了
checkbox + :checked方案，确保<input>没被display: none或visibility: hidden彻底移出渲染树（旧版 Safari 会跳过状态更新） - 触控设备上，
blur()不可靠，改用setTimeout(() => input.checked = false, 100)确保状态重置 - 不要依赖
:focus-within控制收起——它不响应鼠标点击离开，只响应键盘焦点流转
真正难的不是算高度，而是让变量在媒体查询、JS 切换、用户操作之间保持同步；一旦某个环节漏掉 !important 或更高优先级样式覆盖，var(--xxx) 就会静默失效。
