小屏下导航菜单不显示或点击无反应，主因是默认未设display: none、:checked选择器结构错位（checkbox须在nav前）、JS切换类名但CSS规则未匹配，三者占问题80%以上。
小屏下导航菜单不显示或点击无反应，绝大多数情况不是代码写错了，而是初始状态、DOM顺序或交互链断了——display: none没设对、:checked选择器找不到目标、JS切换类名但CSS规则没匹配上，三者占全部问题的 80% 以上。
为什么小屏下导航菜单完全不出现？
根本原因往往是「默认状态缺失」：CSS里没给菜单容器设 display: none，或者媒体查询没生效。
-
@media (max-width: 768px)内必须显式写.nav-menu { display: none; }，不能只靠大屏下的display: flex反向推导 - 断点值别死守
768px—— iPhone SE（320px 宽）在 DPR=3 时 CSS 像素仍是 320，但视口缩放可能让实际渲染宽度浮动；建议用@media (max-width: 576px)覆盖更窄设备 - 检查父容器是否带
overflow: hidden，尤其用position: absolute滑出侧边栏时，它会把transform: translateX(-100%)的内容裁掉
:checked + ~ nav 为什么点了没反应？
:checked 是纯 CSS 开关，但它极度依赖 HTML 结构顺序和可交互性。
-
<input type="checkbox" id="nav-toggle">必须放在<nav>或其直接父容器**之前**，且中间不能有其他元素阻断兄弟关系 - 隐藏 checkbox 时，禁用
display: none和visibility: hidden—— 它们会让控件失去焦点和状态响应；改用position: absolute; opacity: 0; pointer-events: none; - 触发按钮必须是
<label for="nav-toggle">，且for值与input的id大小写完全一致（nav-toggle≠Nav-Toggle）
用 Tailwind 实现时 hidden 类为啥不生效？
Tailwind 的 hidden 和断点类（如 md:flex）不是互斥开关，而是独立媒体查询，叠加逻辑容易误判。
立即学习“前端免费学习笔记（深入）”；
-
hidden md:flex表示「所有屏幕都隐藏，但在中屏及以上额外加flex」——这没意义；正确写法是hidden md:block（小屏隐藏，中屏显示为块） - 如果菜单用了
hidden，又同时加了transition-all，动画不会触发 ——display不支持过渡；需配合opacity和max-h-0/max-h-96手动模拟 - 汉堡按钮点击后菜单仍不可见？先确认 JS 是否真的执行了
classList.toggle('hidden')，再查菜单父容器是否被overflow-hidden截断，最后看 z-index 是否被顶部导航栏盖住
真正难的不是写几行 CSS，而是确保 checkbox 可聚焦、label 能触发、菜单能获得键盘焦点、屏幕阅读器能感知开闭状态——这些细节在 Safari 渲染延迟、iOS 键盘弹出、折叠后 Tab 键跳过菜单时才会暴露。别跳过 aria-expanded 和 focus() 这两步。
