HTML中用代码制作经典的多层选项卡菜单-html教程-PHP中文网

details + summary 可原生实现语义化多层选项卡，无需 js 即支持展开收起、键盘导航与屏幕阅读器，比手写 div 更轻量稳定；需避免嵌套混乱、summary 内嵌 button、display: none 隐藏等常见错误，css 可控箭头、缩进与动效，js 仅用于全区域点击或单开增强，移动端需注意 safari 兼容性。

html中用代码制作经典的多层选项卡菜单

用 `details` + `summary` 实现语义化多层选项卡

原生 HTML 就能做，不用 JS 也能展开收起，而且天然支持键盘焦点和屏幕阅读器。关键是它比手写 div + click 事件更轻、更稳、更可访问。

常见错误是把多个 details 套在一起却没处理嵌套关闭逻辑——浏览器默认允许子 details 独立开关，但视觉上容易混乱；另一个坑是直接用 summary 里塞 button，会导致双击或焦点行为异常。

details 默认关闭，加 open 属性可默认展开
每个 summary 只能有一个直接子节点（文本或行内元素），否则部分浏览器会忽略后续内容
嵌套时，子 details 不会影响父级的展开状态，无需额外 JS 干预
用 CSS 控制箭头图标：通过 summary::marker 或自定义 background 替换默认三角

CSS 控制层级缩进与箭头样式

纯 CSS 就能做出清晰的树形缩进和统一箭头，避免用空格或硬调格式。

重点在于区分层级和状态：details[open] summary::marker 改向下箭头，details:not([open]) summary::marker 改向右箭头；缩进靠 padding-left 配合层级 class 或属性选择器实现。

给第一层 details 加 class="level-1"，第二层加 class="level-2"，然后用 .level-2 { padding-left: 24px; }
禁用默认 marker：先写 summary::marker { content: none; }，再用 background + width/height 手动画图标
hover 和 focus 状态下加背景色，提升可点击感知——尤其对触屏用户很重要
别用 display: none 隐藏 details 内容，会导致语义丢失；改用 opacity: 0; height: 0; overflow: hidden; 配合 transition 做淡出

需要 JS 增强时只补关键行为

只有两个场景真值得加 JS：一是点击任意区域都触发展开（不只是 summary），二是限制单开（同一级只能开一个）。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

强行给整个 details 绑 click 会破坏可访问性——屏幕阅读器用户可能误操作；而“单开”逻辑若不加节流或状态清理，容易导致多个同时打开后无法恢复。

实现全区域点击：监听 details 的 click，检查 event.target === event.currentTarget，再手动切换 open 属性
单开逻辑只需管同级兄弟节点：el.parentElement.querySelectorAll('details').forEach(d => d !== el && (d.open = false))
避免在 summary 上加 onclick="..." 行内脚本，跟语义化初衷冲突
如果菜单项含链接，确保 a 标签不在 summary 内——否则点击链接会先触发展开，再跳转，体验断裂

移动端适配与 Safari 兼容注意点

Safari 对 details 的支持从 iOS 12 / macOS Mojave 开始完整，但老版本仍会降级为静态列表。没有 polyfill 能完美模拟原生行为，所以得接受“不支持就平铺显示”这个事实。

最大实际问题是 iOS 上 details 内部滚动卡顿，以及 Safari 对 summary::marker 的渲染偏移。不是 bug，是渲染管线限制。

在 iOS 上避免给 details 设固定 max-height，改用 height: auto 配合 overflow-y: auto 于内部容器
Safari 中 summary::marker 垂直居中异常？加 line-height: 1; 和 vertical-align: middle; 试试
不要依赖 transition 动画控制 details 显隐——Safari 不触发重排，动画无效；改用 @keyframes + transform 模拟
如果项目必须兼容 iOS 11 及以下，老老实实用 div + aria-expanded + JS，别硬套 details