原生 标签不支持时序标记，需通过 CSS 绘制时间线、JS 控制互斥展开与滚动行为，并用语义化 HTML（如 ）增强可访问性；关键技巧包括伪元素打点、scroll-margin-top 防跳动、removeAttribute('open') 实现手风琴效果。
details 标签本身不支持时序标记，得靠 CSS + JS 补足
原生 <details></details> 只负责折叠/展开逻辑，没有时间线（timeline）能力。所谓“带有时序标记”，比如按年份、步骤顺序逐条展开，必须手动组织结构并用样式或脚本增强视觉表达。
常见错误是直接把多个 <details></details> 堆在一起，结果时间顺序感弱、无连接线、展开后位置跳动。关键在于：用语义化 HTML 搭骨架，CSS 画线+对齐，必要时用 JS 控制展开互斥或自动滚动。
- 每个时序项用一个
<details></details>，内部用<summary></summary>放时间点（如2023-04），正文放内容 - 用
display: flex或grid控制纵向排列，避免默认块级堆叠导致间距失控 - 时间标记建议用
<time datetime="2023-04">2023年4月</time>，兼顾可访问性与语义
用 CSS 画垂直时间线最简单可靠
不用第三方库，纯 CSS 就能做出清晰的时间线效果。核心是给容器加左侧边框，再用伪元素在每个 <summary></summary> 左侧打点，形成“节点+连线”结构。
details {
margin: 0;
}
details:not(:first-of-type) {
margin-top: 1.5rem;
}
details::before {
content: "";
position: absolute;
left: -1.2rem;
top: 1.2rem;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #3b82f6;
}
details summary {
position: relative;
padding-left: 2.5rem;
list-style: none;
}
details summary::marker {
display: none;
}
details[open] summary {
font-weight: 600;
}
注意：summary 默认有 ::marker（小三角），必须显式 display: none 否则和自定义圆点重叠；left 和 top 值需配合字体大小微调，否则圆点错位。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
多个 details 展开时如何避免页面乱跳
原生 <details></details> 展开后高度突变，若内容长或页面已有滚动位置，用户会感觉“被拽上去”。这不是 bug，而是浏览器对 open 状态变更的默认滚动行为。
- 加
scroll-margin-top到<details></details>上，预留导航栏高度，比如scroll-margin-top: 64px - 禁用自动滚动：监听
toggle事件，调用event.preventDefault()不行（该事件不可取消），只能用scrollIntoView({ block: 'nearest' })替代默认行为 - 更稳妥的做法是：所有
<details></details>设置scroll-margin-top，并确保父容器有明确max-height或使用contain: layout减少重排影响
需要“只展开一个”时别硬写 JS 切换 open 属性
想实现手风琴效果（一次只开一个），很多人直接遍历 DOM 手动删 open，但容易漏掉异步插入的节点，且破坏了 <details></details> 的原生可访问性（如屏幕阅读器识别）。
推荐方案是用 <details></details> 原生机制配合 CSS + 最小 JS：
- CSS 层面：用
:has(+ details[open])隐藏后续项的 summary（兼容性有限，仅 Chrome 121+ / Safari 17.4+） - JS 层面：监听
toggle，对其他details调用.removeAttribute('open')，而非.open = false（后者会触发二次 toggle 事件） - 务必加
role="region"和aria-labelledby到每个<details></details>，让辅助技术知道这是独立可折叠区域
时序类内容真正难的不是折叠，而是当时间点密集（比如每小时一条）、或需响应式缩略（移动端收起时间标签）时，CSS 的弹性控制和 JS 的状态同步容易脱节——这时候宁可拆成两个组件：时间轴用 <ol></ol> 渲染，详情用独立弹层，反而更稳。
