小屏下导航条消失主因是 overflow: hidden 裁剪或 height: 0 + opacity: 0 未配 pointer-events: none；应保持 HTML 结构，用媒体查询控制样式；transform 配合 opacity 更适合过渡动画，需补全 transition 属性并加 pointer-events: none。
小屏下导航条突然消失，但没触发 display: none
常见现象是：屏幕缩到 768px 以下，导航栏“不见了”，但审查元素发现 display 还是 flex 或 block，实际是被 overflow: hidden 父容器裁掉，或 height: 0 + opacity: 0 配合了过渡却没设 pointer-events: none，导致点击穿透或悬停失效。
- 检查父容器是否设置了
overflow: hidden且高度固定（比如height: 60px），小屏时子元素高度超限就被截断 - 如果用了
max-height+transition做收起动画，必须搭配overflow: hidden，否则内容会撑开容器 -
visibility: hidden不释放布局空间，但依然响应事件；真要禁交互得加pointer-events: none
用 media query 切换显示逻辑时，nav 的结构要不要改
不需要动 HTML 结构。响应式隐藏的核心是控制呈现，不是重写 DOM。强行用 JS 拆分/插入 nav 内容，反而增加维护成本和 SSR 不一致风险。
- 保持同一套
nav标签，在 CSS 里用@media (max-width: 768px)控制display、flex-direction、justify-content等属性 - 小屏优先项目可反向写：
@media (min-width: 769px)处理桌面端展开态，避免大屏样式被小屏规则覆盖 - 若导航项过多需折叠为汉堡菜单，只需给按钮加
aria-expanded和aria-controls，不需删减nav ul的 DOM 节点
transform: translateY(-100%) 比 display: none 更适合做隐藏动画吗
是的，但只在需要过渡效果时才用 transform。直接切 display 无法触发 CSS 过渡，而 transform 是 GPU 加速属性，性能更稳，且不会引起重排。
-
display: none立即移除渲染，不能过渡；想淡出+上滑，得用opacity+transform组合 - 务必设置
transition: opacity 0.3s ease, transform 0.3s ease，漏写任一属性会导致只有部分生效 - 隐藏后记得加
pointer-events: none，否则即使看不见，鼠标悬停仍可能触发:hover样式 - 慎用
height: 0+overflow: hidden：字体大小、行高变化时容易计算不准，动画卡顿
移动端点击汉堡图标没反应，JS 绑定失败的典型原因
多数不是逻辑写错，而是事件绑定时机或选择器问题。尤其当导航 HTML 是动态插入（如通过 Web Component 或框架挂载）时，document.querySelector 可能取不到元素。
立即学习“前端免费学习笔记（深入）”；
- 确保 JS 执行时
nav和按钮已存在于 DOM，不要放在<head>里直接执行，用DOMContentLoaded或defer - 检查按钮是否有
id或class，别写成querySelector('.humburger')却实际是class="hamburger"（少个r） - 如果用了
aria-expanded="false"，切换时不仅要改属性值，还得同步更新nav的显隐状态，否则屏幕阅读器无法感知 - 真机调试时注意：iOS Safari 对
click有 300ms 延迟，建议用touchstart或引入fastclick库
