移动端菜单折叠异常主因是flex-column下子项高度失控、溢出或未配max-height/overflow/transition；需用JS动态计算真实高度并过渡max-height，禁用height:auto，设flex:none防压缩，明确transition属性。
移动端菜单折叠异常，常见原因是 flex 容器设为 flex-direction: column 后，子项高度未受控、内容溢出或未正确设置折叠逻辑（如 max-height、overflow、transition），导致视觉上“卡住”或“不收拢”。单纯用 column 并不能自动实现折叠，需配合高度控制与动画机制。
确保父容器有明确的高度限制和溢出控制
当菜单使用 flex-direction: column 布局时，若子菜单项（如 <ul></ul>）默认展开，必须显式约束其高度并隐藏溢出内容：
- 给折叠区域（如
.submenu）设置max-height: 0（收起态）和overflow: hidden - 展开时通过 JS 切换 class，设
max-height: 300px（或用 JS 动态计算实际高度） - 避免只用
height: 0 / height: auto——auto无法过渡，max-height才支持 CSS 过渡
用 JS 动态计算展开所需高度（更可靠）
固定 max-height 值容易因内容变化而截断或留白过多。推荐在展开前用 JS 获取真实高度：
- 展开前先临时移除
max-height和overflow，让元素自然撑开 - 读取
offsetHeight，再设回max-height: 0，触发重排 - 加个
setTimeout后设max-height: 实际高度 + "px"，启动过渡 - 收起时直接设
max-height: 0即可（无需再次计算）
检查 flex 子项是否意外拉伸或压缩
column 布局下，若菜单项设了 flex: 1 或 align-items: stretch，可能干扰折叠区域高度计算：
立即学习“前端免费学习笔记（深入）”；
- 折叠容器（如
.submenu）建议设flex: none或flex-shrink: 0，避免被 flex 主轴压缩 - 内部列表项用
display: block即可，无需额外 flex 设置 - 移除不必要的
min-height、height: 100%等可能撑高容器的样式
过渡属性要写全且作用于 height 相关属性
仅写 transition: all .3s 不稳定，应明确指定：
transition: max-height .3s ease-in-out, opacity .2s ease- 避免对
height过渡（height: auto不支持过渡） - 可叠加
opacity或visibility提升体验，但注意visibility: hidden会立即消失，需配合transition-delay
