如何仅用纯 CSS 实现移动端导航菜单的点击展开（无 JavaScript）

本文详解为何 `#check:checked ~ #nav-list` 无法触发导航栏显示，并提供符合 css 选择器限制的结构修复方案，通过调整 html 层级关系与合理使用相邻/通用兄弟选择器，实现纯 css 响应式汉堡菜单。

在纯 CSS 导航菜单实现中，一个常见却极易被忽视的关键点是：CSS 选择器无法跨越 dom 层级“向上”或“跨父级”选取元素。你当前的 html 结构中：

可以看到：#nav-list 和 #hamcross 是同级兄弟元素，而 #check 是 #hamcross 的子元素。因此，#check:checked ~ #nav-list 这一选择器完全无效——因为 ~（通用兄弟选择器）只能匹配 同一父级下、位于该元素之后的兄弟元素，而 #check 的父级是 #hamcross，#nav-list 并不在其内部，也不与其同属一个直接父容器。

✅ 正确解法：让 #nav-list 成为 #check 的后续兄弟元素（即同级且在其后），且二者必须共享同一个直接父容器。

✅ 推荐修复结构（无需 js，语义清晰）

将 #nav-list 移至 #hamcross 同级，并置于其之后（保证 CSS 选择器可定位）：

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

✅ 对应关键 CSS（精简核心逻辑）

/* 默认隐藏菜单（移动端） */ @media (max-width: 1000px) {   #nav-list {     display: none;     position: absolute;     top: 100%;     left: 0;     width: 100%;     background-color: #0e1317;     flex-direction: column;     padding: 15px 0;     z-index: 9;   }    /* ✅ 正确选择器：#check 与 #nav-list 同属 .navbar，且 #nav-list 在 #check 后 */   #check:checked ~ #nav-list {     display: flex;   }    /* 子菜单在移动端默认展开（可选优化） */   #nav-list .sub-child {     display: block !important;     position: static;     padding: 0;   }   #nav-list .sub-child li {     padding: 8px 20px;   } }  /* 桌面端恢复水平布局 */ @media (min-width: 1001px) {   #nav-list {     display: flex !important;     flex-direction: row;   }   #nav-list .sub-child {     display: none;   }   #nav-list li:hover > .sub-child {     display: block;   } }

⚠️ 注意事项与最佳实践

• 结构决定样式能力：CSS 选择器（+, ~, >）严格依赖 DOM 树层级。务必确保目标元素（如 #nav-list）与触发器（#check）处于可被选择器关联的位置。
• 避免 !important 泛滥：仅在必要时覆盖媒体查询冲突（如上面 .sub-child 的 display），优先通过更精确的选择器权重解决。
• 可访问性增强：为 添加 aria-label=”Toggle navigation”，并用 :focus-visible 优化键盘导航体验。
• 动画建议：display 切换不支持过渡动画。若需淡入/滑动效果，改用 opacity + max-height 或 transform: scaleY() 配合 overflow: hidden：

#nav-list {   opacity: 0;   transform: scaleY(0);   transform-origin: top;   transition: opacity 0.3s ease, transform 0.3s ease; } #check:checked ~ #nav-list {   opacity: 1;   transform: scaleY(1); }

通过重构 HTML 层级并精准运用 CSS 兄弟选择器，你完全可以构建出高性能、无障碍、零 JS 的响应式导航菜单——这正是现代 CSS 强大能力的体现。