HTML5details和summary展开收起教程

• 先清除原生标记：

  summary::marker { content: ''; }

• 再用伪元素加图标（推荐 SVG 内联，避免字体图标兼容问题）：

  summary::after { content: '▶'; transform: rotate(0deg); transition: transform 0.2s; } details[open] > summary::after { transform: rotate(90deg); }

• ⚠️ Safari 中 ::marker 无效，必须依赖 ::before/::after；若用字体图标（如 Font Awesome），要确保 font-display: optional 避免 FOIT

多个

联动：点击一个展开时自动收起其他

原生不支持手风琴效果，得用 JS 监听 toggle 事件并手动处理兄弟节点。

• 监听所有
  的 toggle 事件（注意：该事件在展开/收起后触发，不是点击瞬间）：

  document.querySelectorAll('details').forEach(details => { details.addEventListener('toggle', () => { if (details.open) { document.querySelectorAll('details').forEach(d => { if (d !== details) d.removeAttribute('open'); }); } }); });

• ⚠️ 关键点：不能在 click 上做，因为
  点击行为由浏览器接管，click 事件可能早于状态更新；toggle 才是状态落地后的可靠时机
• 性能提示：如果列表很长（>50 项），建议用事件委托，但需注意
  不冒泡 toggle 事件，只能逐个绑定

细节上最常被忽略的是：Safari 对 toggle 事件的支持从 iOS 16.4 / macOS 13.3 才开始完整；若需兼容更老版本，得降级为监听 click 并用 setTimeout 延迟判断 open 状态——这时候原生优势就弱了，不如直接上轻量 JS 组件。

以上就是《HTML5details和summary展开收起教程》的详细内容，更多关于的资料请关注golang学习网公众号！