17370845950

和是HTML5原生折叠组件，语义清晰、无需JS、支持键盘操作；必须为首个子元素，加open属性可默认展开；不支持IE，Edge 15+及主流移动端浏览器均兼容。

details 和 summary 是 HTML5 原生折叠组件

直接用，不用 JS 就能实现点击展开/收起，语义清晰、可访问性好、自带键盘支持（空格/回车触发）。

是容器，

是标题栏，必须是它的第一个子元素。

常见错误：把

写在

外面，或中间插了其他元素——浏览器会忽略或降级为普通文本。

• 默认收起，加 open 属性可默认展开：
• 里可以放文字、图标甚至 ，但别套 （非流式内容，可能破坏可访问性）
• 不支持 IE，Edge 15+ 开始支持；移动端 Safari/Chrome 都没问题

  
点击展开说明
  
这里是折叠的内容，可以是段落、列表、表格……

HTML4 时代没 details，靠 JS + CSS 模拟

那时候只能手动控制 class 切换（比如 is-open），再用 CSS 控制 max-height 或 display。核心难点不在“怎么写”，而在“怎么写得健壮”。

典型陷阱：display: none 切换会导致重排、焦点丢失、屏幕阅读器跳过；用 max-height: 0 + 过渡动画更平滑，但要预估最大高度（设太小会截断，太大动画卡顿）。

• 必须监听 click 并调用 preventDefault()，否则 标签会跳转
• 用 aria-expanded 和 aria-controls 手动补全可访问性，否则读屏软件不知道状态
• 如果内容高度动态（比如含图片加载后撑开），纯 CSS 动画会失效，必须 JS 测高或改用 height: auto + scrollHeight 计算

summary 的箭头样式怎么改？别用 background-image

浏览器对

自带一个下拉箭头（WebKit 内核显示为三角，Firefox 是右侧小点），想自定义得覆盖伪元素。关键是：不同引擎用的伪元素名不一样。
• Chrome/Safari 用 ::marker（较新标准，但 Safari 15.4+ 才稳定支持）
• 旧版 WebKit 用 ::-webkit-details-marker
• Firefox 不支持 ::marker 时，得靠 list-style: none + ::before 手动加图标

最稳妥写法是先清空原生标记，再统一用 ::before：

summary {
  list-style: none;
}
summary::before {
  content: "▶";
  margin-right: 6px;
  transition: transform 0.2s;
}
details[open] > summary::before {
  transform: rotate(90deg);
}

折叠菜单用 details 是否适合生产环境？看场景

如果是简单文档侧边栏、FAQ、设置项分组，

完全够用，代码少、维护成本低、SEO 友好（所有内容都在 DOM 里）。

但如果菜单需要多级嵌套（比如三级导航）、带图标/徽标/禁用态、或要求动画与路由联动（如 Vue Router 激活高亮），就别硬套——

不提供事件钩子，也不支持受控模式，强行 patch 容易失控。

这时候该上轻量 JS 库（如 accordion-js）或框架组件（ / ），而不是反复魔改原生标签。