小屏幕下拉菜单不展开主因是display:none父级截断渲染流，应改用visibility:hidden+opacity:0控制显隐；全屏覆盖需设body overflow:hidden和height:100vh；遮罩关闭须校验event.target；动画卡顿需避免强制同步布局并合理使用will-change。
小屏幕下拉菜单不展开？检查 display 和 visibility 的叠加影响
响应式下拉菜单在小屏“点不动”或“点了没反应”，大概率不是 JS 问题，而是 CSS 层叠把 display: none 和 visibility: hidden 混用了。移动端触摸事件触发后，菜单容器可能被父级的 display: none 锁死，哪怕 JS 把子元素设成 display: block 也无效——因为父级已脱离渲染流。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保触发按钮（如
.menu-toggle）和下拉容器（如.dropdown-menu）处于同一渲染上下文，避免被display: none的祖先截断 - 小屏切换时，优先用
visibility: hidden+opacity: 0控制显隐，保留布局占位；展开时改用visibility: visible+opacity: 1，再配合transform: translateY(0)触发硬件加速 - 别在媒体查询里写
.dropdown-menu { display: none }，改用类控制：.dropdown-menu.is-closed { visibility: hidden; opacity: 0 }
position: fixed 全屏覆盖时，滚动条消失或内容错位
用 position: fixed 实现全屏覆盖最直接，但容易忽略两个关键点：一是 html 或 body 的 overflow 默认值会干扰，二是 top: 0; left: 0; width: 100%; height: 100% 在某些 iOS Safari 下会漏掉状态栏高度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 激活全屏菜单时，给
body加overflow: hidden，防止背景滚动；关闭时记得移除，否则页面卡死 - 全屏容器不要只靠
height: 100%，改用height: 100vh，并在 iOS 上补一句min-height: -webkit-fill-available - 如果菜单内有滚动列表，给内部
.menu-scrollable设max-height: calc(100vh - 60px)（减去 header 高度），并加overflow-y: auto
点击遮罩层关闭菜单，但点击菜单内部也关闭了
这是事件冒泡导致的典型误判。遮罩层（.menu-overlay）和菜单内容（.menu-content）是兄弟节点，但很多人把关闭逻辑绑在 .menu-overlay 的 click 上，没阻止子元素事件冒泡。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 关闭逻辑应监听
.menu-overlay的click，但必须检查event.target === event.currentTarget，否则点到菜单里的链接、按钮也会触发关闭 - 更稳妥的做法是：给
.menu-overlay设pointer-events: auto，给.menu-content设pointer-events: auto，然后在遮罩层上监听 click，不依赖冒泡 - 别用
stopPropagation()塞满所有子元素，维护成本高；统一用事件委托 + target 判断更干净
动画卡顿或闪一下才出现？查 will-change 和重排触发时机
全屏菜单入场动画（比如从底部滑入）在低端安卓机或旧版 iOS 上容易卡顿，表面看是 CSS 动画慢，实际常因浏览器反复重排：JS 修改 display 后立刻读取 offsetHeight，强制同步布局计算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 入场前先设好初始状态：
.menu-fullscreen { opacity: 0; transform: translateY(100%); transition: opacity 0.3s, transform 0.3s; } - JS 中先添加类，再用
requestAnimationFrame延迟一帧再加is-active类触发动画，避开 layout thrashing - 对动画容器加
will-change: transform, opacity，但仅在激活前动态添加，用完即删，避免长期占用 GPU 内存
真正难的不是让菜单“铺满屏幕”，而是让它在各种 viewport 缩放、横竖屏切换、iOS 弹窗键盘弹出后仍保持定位准确、滚动可控、动画不撕裂。这些细节不会报错，但用户一碰就感知得到。
