原生 details + summary 可实现语义化、可访问的日志折叠展开，每版本独立包裹，无需 JS；默认收起，加 open 可默认展开；避免覆盖默认行为以保键盘与屏幕阅读器支持。
用 details 和 summary 最简实现折叠展开
HTML 原生就支持日志列表的折叠展开，不需要 JS 或 CSS 框架——details 元素就是为此设计的。summary 作为其唯一可选的直接子元素，会自动变成可点击的标题栏，点击即切换展开/收起状态。
常见错误是手动写 div + JS 控制 display，既冗余又丢失语义、键盘可访问性差。原生方案默认支持空格/回车触发、屏幕阅读器识别、无需额外 ARIA 属性。
-
details默认收起，加open属性可默认展开：<details open></details> -
summary内容会显示为控件文本，支持内联 HTML（如<strong>v1.2.0</strong>） - 不要在
summary外再套其他标签；details只允许一个summary，其余内容为展开区域
日志列表嵌套在 details 里怎么保持结构清晰
更新日志通常是带时间、版本号、变更类型的多层级列表，直接塞进 details 容易语义混乱。关键点在于：把 details 当作“条目容器”，而非“整个日志页容器”。
正确做法是每个版本一条 details，而不是整个 ul 包在一个 details 里。这样每条日志独立控制，用户可自由展开关心的版本，页面也更利于滚动定位和 SEO。
立即学习“前端免费学习笔记（深入）”；
- 避免：
<details><ul> <li>v1.0</li> <li>v1.1</li> </ul></details>（所有日志被绑死一起开关） - 推荐：
<details><summary>v1.2.0</summary><ul><li>修复登录态失效</li></ul></details>（每条独立） - 若需默认全部收起，不加
open；若想默认展开最新版，只给最新details加open
样式微调时容易破坏可访问性的几个坑
details 的默认箭头、聚焦样式、禁用状态等由浏览器控制，强行用 appearance: none 或覆盖 summary::marker 很容易让屏幕阅读器无法识别状态，或键盘用户失去焦点指示。
- 修改箭头可用
summary::marker，但别删掉它；若要自定义，确保仍提供视觉反馈（如旋转动画）表示开/关 - 不要对
summary设置pointer-events: none或tabindex="-1"，这会让键盘用户无法操作 - 展开区内容若含交互元素（如链接、按钮），确保它们在收起状态下 DOM 仍在（
details不移除 DOM，只是隐藏，这点比 JS 方案更可靠） - Chrome/Firefox 支持良好，Safari 旧版本（≤15.4）对
summary::marker支持有限，建议用渐进增强思路
需要 JS 监听展开收起事件怎么办
原生 details 触发 toggle 事件，但注意：该事件**只在用户交互时触发**，JS 调用 element.open = true 不会触发它。所以监听逻辑必须围绕用户行为，不能假设所有状态变更都走这个事件。
- 绑定方式：
document.addEventListener('toggle', e => { if (e.target.tagName === 'DETAILS') { /* 处理 */ } }) - 获取当前状态用
e.target.open，不是e.detail（后者不存在） - 如果要做分析上报，注意首次加载时的
open属性状态不会触发toggle，需单独检查 - 不要用
click代替toggle，因为键盘操作（空格/回车）不会触发click
最稳妥的日志折叠方案，就是每个版本一条 details，不碰默认行为，仅用 CSS 做最小必要修饰。复杂交互需求（比如“展开全部”按钮、联动筛选）才值得引入 JS，否则纯 HTML 已足够健壮。
