details标签作用及高级使用技巧

`details`标签的核心价值在于提供语义化、无障碍且跨浏览器一致的可折叠披露组件，而非单纯实现视觉动效；它原生支持键盘操作（Enter/Space）、屏幕阅读器状态识别和自动触发`toggle`事件，但所有高级用法——如自定义图标、JS控制或样式优化——都必须严格遵循其语义规则：`summary`必须为首个子元素、图标需用`summary::before`实现、JS必须操作`open`属性而非`display`，否则将破坏可访问性与兼容性，尤其在Safari、旧版Chrome及辅助技术中失效。

details 标签不是“用来加动画的”，它的核心作用是语义化地声明一个可折叠的披露组件——浏览器原生支持展开/收起、键盘操作（Enter/Space）、屏幕阅读器识别状态，连 toggle 事件都自动触发。所有“高级玩法”都得先踩稳这个基础。

summary 必须是 details 的第一个子元素，否则点不动

这是最常被忽略的结构铁律。Safari 和部分旧版 Chrome 会直接禁用点击逻辑，表现为“鼠标悬停有手型，但点了没反应”。

• ✅ 正确：
  标题

  内容

• ❌ 错误：
  标题

  内容

  （summary 被 div 包裹）
• ❌ 错误：

  标题

  内容

  （summary 不是首个子节点）
• ⚠️ 注意：summary 内部避免用 display: inline-block 或 float，会压缩点击热区，尤其在移动端易失焦

自定义箭头必须用 summary::before，别碰 ::marker

::marker 在 Safari ≤15.6 和部分 Edge 中不生效，::-webkit-details-marker 又只限 WebKit。统一用 summary::before 是唯一可靠方案。

• 隐藏原生图标：summary { list-style: none; }
• 加自定义图标：summary::before { content: "▶"; margin-right: 6px; transition: transform 0.2s; }
• 展开时旋转：details[open] summary::before { transform: rotate(90deg); }
• 不要写 details[open] summary::marker { display: none; }——这行在 Safari 上根本无效

JS 控制必须改 open 属性，不能动 style.display

直接设置 el.style.display = 'none' 会绕过浏览器内置状态机：键盘焦点错乱、toggle 事件不触发、屏幕阅读器读不出当前是否展开。

• ✅ 正确切换：el.open = !el.open 或 el.toggleAttribute('open')
• ✅ 监听变化：el.addEventListener('toggle', () => console.log('当前状态：', el.open))
• ✅ 默认展开：
  标题

  内容

• ⚠️ 注意：想实现“手风琴效果”（单开一栏），得用 JS 遍历其他 details 并设 .open = false，不能靠 CSS 伪类模拟

真正难的不是让内容动起来，而是让 details 在 Safari、VoiceOver、低配安卓机上都保持一致的行为。所有“高级”样式或交互，一旦破坏了原生语义链（比如用 div 包 summary、用 display 覆盖状态），就等于把布洛芬换成了安慰剂——看起来像在治病，其实没用。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~