折叠菜单问题核心在于跨端交互适配与可访问性：需同步 aria-expanded 状态、绑定 click/touchstart 事件、用 button 触发器、区分 hover/JS 展开逻辑、避免 height 过渡、合理设置断点及键盘导航支持。

折叠菜单在小屏下不展开或点击无反应

多数问题出在 aria-expanded 状态没同步更新，或者 JavaScript 事件绑定漏掉了移动端的 touchstart。纯 CSS 实现的折叠菜单（比如用 :checked + 隐藏单选框）在 iOS Safari 上容易失效——因为 Safari 对 label 关联隐藏输入框的点击穿透支持不稳定。

• 务必用 button 元素做触发器，而不是 div 或 span，否则屏幕阅读器无法识别可交互性
• 如果用 JS 控制，监听 click 和 touchstart 两个事件，避免只绑 click 导致 iOS 点击延迟或失效
• 切换时手动设置 element.setAttribute('aria-expanded', 'true')，别依赖 CSS 类名推断状态

二级菜单在桌面端 hover 展开、移动端却要 click 才能展开

这不是 bug，而是必须的适配逻辑。桌面端靠 :hover 可以自然展开，但触摸设备没有 hover 状态，强行复用会导致误触或无法收起。直接写 @media (hover: hover) and (pointer: fine) 区分才是稳妥做法。

• 桌面端：用 .menu-item:hover .submenu 触发展开，配合 transition 做平滑位移
• 移动端：用 .menu-item.active .submenu，JS 切换 active 类，同时控制 aria-expanded 和 hidden 属性
• 避免混用 :hover 和 JS 切换同一元素的显示状态，否则在平板横竖切换时状态可能错乱

折叠菜单动画卡顿或布局跳动

常见原因是用了 height: auto 做过渡，浏览器无法计算中间帧；或是没设 overflow: hidden，内容撑开容器导致重排。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 不要对 height 做 transition，改用 max-height（设一个足够大的值如 max-height: 500px）+ overflow: hidden
• 动画属性优先用 transform 和 opacity，它们走 GPU 加速，比 margin 或 padding 更流畅
• 确保父容器有明确高度或 min-height，否则 flex 容器在子项展开时可能反复重算主轴尺寸

响应式断点设置不合理导致菜单错位

硬编码 @media (max-width: 768px) 很危险——iPad Pro 宽度是 1024px，但横向手持时 viewport 宽度可能只有 834px；某些安卓浏览器会把地址栏高度算进 viewport，造成断点临界值抖动。

立即学习“前端免费学习笔记（深入）”；

• 优先用 @media (max-width: 480px) 处理手机竖屏，@media (min-width: 481px) and (max-width: 1024px) 处理平板，再用 @media (min-width: 1025px) 处理桌面
• 关键断点处检查 viewport meta 标签是否生效：<meta name="viewport" content="width=device-width, initial-scale=1"> 缺失会导致所有媒体查询失效
• 用 rem 或 em 设断点值（如 @media (max-width: 30rem)），比像素值更适应用户缩放设置

实际项目中最容易被忽略的，是折叠菜单在键盘导航下的行为——比如按 Tab 进入菜单项后，按 Enter 或 Space 必须能触发展开，且焦点要自动移到第一个子菜单项。这点不做，就等于默认放弃了键盘用户。