<details>标签不支持多级展开，但可通过嵌套实现语言分组；应按语言对（如中文↔英语）分设独立折叠块，避免将全部语言堆叠在一个<details>中导致查找困难。
details 标签本身不支持多级展开，但可嵌套实现语言分组
直接把整个多国语言对照表塞进一个 <details> 里，用户得滚动半天找目标语言——这不是折叠，是藏。真正实用的做法是按语言对或语种分组，每个 <details> 包一组对照项。比如中文↔英语、中文↔日语各一个折叠块，而不是“所有语言全堆一起再折叠”。
注意：HTML 规范允许 <details> 嵌套，但部分旧版 Safari（<summary> 的点击区域响应不稳定，建议外层用 <details open> 默认展开语种目录，内层保持单层折叠。
- 每个
<details>对应一个语言对（如“中↔英”），<summary>写简明标题，比如<summary>中文 ↔ 英语</summary> - 表格用
<table>，不要用 div 模拟；<th>标明列头（“中文”“English”），避免屏幕阅读器误读 - 避免在
<summary>里放大段文字或按钮，iOS Safari 可能截断或吞点击
表格内容要精简，否则折叠体验会变差
用户点开 <details> 是为了快速定位，不是为了看一篇双语词典。如果每组对照动辄上百行，加载慢、滚动卡、搜索难——这时候折叠反而成了障碍。
实操建议：单个 <details> 内的表格控制在 20 行以内；高频词优先（问候、数字、时间、方向）；生僻词或专业术语单独归类，或提供“展开全部”按钮动态加载。
立即学习“前端免费学习笔记（深入）”；
- 用
colgroup+col控制列宽，防止某列文字过长撑乱布局，例如：<colgroup><col width="120"><col width="180"></colgroup>
- 加
border-collapse: collapse和轻量边框（如1px solid #ddd），视觉更紧凑 - 禁用表格内的
<input>或复杂交互——<details>不是 UI 容器，是信息分组机制
无障碍必须处理 summary 的语言属性和焦点管理
屏幕阅读器靠 <summary> 文本理解折叠块用途，如果写“点击展开”，它无法告诉用户“这是中日对照”。更糟的是，若页面有多个 <details>，又没区分语言，NVDA 或 VoiceOver 会连续读出“详情、详情、详情……”。
- 给每个
<summary>加lang属性，例如：<summary lang="zh">中文 ↔ 日本語</summary> - 用
aria-label补充说明用途，如：<details aria-label="中文与日语日常用语对照"> - JavaScript 动态控制展开时，记得用
focus()把焦点移到<summary>，否则键盘用户可能卡在上一个元素
别依赖 CSS 强制修改 details 的默认行为
有人想用 details[open] { height: auto; transition: height .3s; } 做展开动画——不行。<details> 的 open 是布尔属性，不是 CSS 类，且原生高度过渡不被浏览器支持（Chrome/Firefox 忽略，Safari 报 warning）。强行 hack 容易导致折叠状态错乱、键盘操作失灵。
真需要动画，用 JS 控制 max-height + overflow，并同步维护 open 属性值；或者干脆放弃动画，原生 <details> 的瞬时切换反而更符合用户预期。
- 禁止重置
<summary>的list-style后不补自定义三角图标——这会让视觉用户失去展开提示 - 不要给
<details>设display: inline，它在多数场景下需块级流式布局 - 测试时用真实键盘（Tab + Enter）验证，光靠鼠标点开不算通过
white-space: nowrap 配合 text-overflow: ellipsis 截断超长项，比硬撑更可靠。 
