details/summary不适合导航菜单，因其专为单块内容折叠设计：无法实现多details联动（如手风琴效果）、不支持合法嵌套、summary必须为首子元素否则失效，且CSS动画仅能通过max-height模拟，height:auto不可过渡。
纯 CSS 能实现折叠导航，但必须选对方案：简单 FAQ 用 details/summary；移动端汉堡菜单或侧边栏伸缩，得用 checkbox hack；hover 展开只适合桌面端悬停场景，且不支持触屏。
为什么 details/summary 不适合导航菜单
它天生为单块内容折叠设计，不是为导航结构服务的：
- 无法控制多个
details之间的联动（比如点开一个，其他自动收起） - 不能嵌套另一个
details—— 多级菜单直接失效 -
summary必须是第一个子元素，否则点击无反应；常见错误是写成内容
标题
- CSS 动画只能靠
max-height模拟，height: auto无法过渡，容易出现“突然弹出”或“高度卡死”
checkbox hack 实现汉堡菜单的关键约束
这个方案能脱离 JS 控制显隐，但 HTML 结构有硬性要求：
-
必须在内部，且排在导航列表和遮罩层之前 -
和目标必须是input的**同级兄弟元素**，否则input:checked ~ .nav-list选择器不生效 - 移动端需配合媒体查询：
@media (max-width: 768px)下才让.nav-list默认display: none，桌面端保持display: flex - 动画靠
max-height+overflow: hidden配合过渡，别设height或visibility，否则动画中断
hover 方案只在桌面端可靠
用 :hover 控制子菜单显示，看似简单，但实际限制极多：
- 移动端完全不可用 —— 没有 hover 状态，点一下就触发 focus，再点一下才可能展开，体验断裂
- 键盘用户无法操作，不满足基础可访问性（WCAG 2.1 AA）
- 父级必须设
position: relative，子菜单用position: absolute，否则定位飘移 - 如果导航项是
包裹整个区块，:hover会作用于链接本身，导致文字变色干扰菜单逻辑
Bootstrap collapse 类不是纯 CSS 方案
它看起来像纯 CSS，实则依赖 Bootstrap 的 JS 初始化：
- 即使你只写了
class="collapse"和data-bs-toggle="collapse"，底层仍是 JS 监听事件并切换aria-expanded、show类 - 若禁用 JS，
data-bs-toggle属性完全无效，点击毫无反应 - 动画失效常见原因是目标元素被其他样式覆盖了
overflow或设置了固定height，导致max-height过渡被截断 - 多级菜单必须改用
accordion模式，硬套collapse会导致状态混乱，无法联动收起
真正无 JS 的折叠导航，核心就两条路：语义化但能力有限的 details，或结构受限但可控的 checkbox hack。选哪个，取决于你是否接受 HTML 排序约束，以及是否需要键盘/屏幕阅读器支持 —— 前者原生支持，后者得手动补 aria-expanded 和焦点管理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
