HTML导航布局使用details制作折叠菜单-html教程-PHP中文网

details元素不支持多级嵌套折叠，因summary嵌套触发事件冒泡与焦点切换致父级意外关闭；summary内不宜放链接，应移出并定位或用button替代；Safari 15.4前open属性动态更新无效，需检测兼容性并降级；移动端需防触摸穿透，加touch-action及收起延迟。

html导航布局使用details制作折叠菜单

details元素默认不支持多级嵌套折叠

直接在

的里再放一个，点击子菜单时父级会意外关闭——这是浏览器原生行为，不是 bug。因为是可聚焦、可点击的交互元素，嵌套后事件冒泡+焦点切换触发了父的 toggle。

实操建议：

用 CSS 隐藏父级的默认箭头（list-style: none + 自定义伪元素），改用 JS 控制展开状态，避免依赖原生 toggle
把子菜单放在父的 内，但用 display: block + max-height 动画模拟折叠，不嵌套
如果坚持用纯 HTML，只能做单层：每个独立，靠 CSS 定位实现视觉上的“嵌套感”，但逻辑上无父子联动


summary点击区域太小且无法键盘聚焦到内部链接
 默认只包裹文字，里面放  标签后，键盘 Tab 到该  时焦点停在 summary 元素本身，按回车不会触发链接跳转，用户必须再按一次 Tab 才能进到链接——对无障碍访问很不友好。
实操建议：

不要在  里直接写 ；把它移出来，作为同级兄弟元素，用 CSS 绝对定位覆盖在 summary 可视区域上
给  加 tabindex="0" 并监听 keydown（Enter/Space），手动触发  的 toggle()

若 summary 内必须有操作按钮（如“更多”），用  替代 ，并加 aria-expanded 同步状态

details在 Safari 15.4 之前不支持 open 属性的动态更新
比如用 JS 设置 el.open = true，在旧版 Safari 中无效，DOM 上属性写了，但视觉不展开。这是已知兼容性坑，不是代码写错。

											
												
												
													使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
													使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
												
												下载
												
											
										
实操建议：

检测浏览器是否支持：用 "open" in document.createElement("details") 判断，不支持就 fallback 到 class 切换 + CSS max-height 动画
强制重绘：设置 open 后，加一句 el.offsetHeight 触发 layout，再设 open = true（部分老版本需要）
服务端渲染时，如果初始状态为展开，别只靠 open 属性，同时加 class="is-open" 和对应 CSS 规则，确保降级可用

移动端触摸穿透导致意外收起
在 iOS Safari 中，快速连续点击两个相邻的 
，第二个可能没反应，或者点完第一个后页面轻微滚动，导致手指实际点到了空白处，触发了自动收起。
实操建议：

给  外层容器加 touch-action: manipulation，减少延迟和误判
禁用  的默认高亮：用 -webkit-tap-highlight-color: transparent

收起时加 100ms 延迟再允许下一次 toggle，防止连点抖动：setTimeout(() => { detailsEl.open = false }, 100)




细节上最麻烦的其实是焦点管理与 touch 事件节奏的配合，尤其当菜单项带图标、徽标或 badge 时，summary 的 padding、line-height、vertical-align 稍微一错，视觉对齐和点击热区就全乱了。