html5的details和summary怎么用_html4做折叠菜单靠啥【方法】

星夢妙者 2025-12-30 00:00:00 次阅读

和是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）或框架组件（ / ），而不是反复魔改原生标签。