标签不感知语言切换，其展开逻辑和视觉样式不受lang/dir影响；内部文本需显式声明lang和dir以确保正确渲染、断行与语音合成。
details标签本身不感知语言切换
<details></details> 是纯行为型语义标签，它不读取 lang 属性、不响应 :lang() 伪类、也不因文本语言变化自动调整展开逻辑或视觉样式。你切换成 lang="ar" 后，<details></details> 依然从左往右展开，<summary></summary> 的默认小三角仍在右侧——这不是 bug，是设计使然。
真正受影响的是内部文本渲染：阿拉伯语内容若没包裹在 lang="ar" 的 <summary></summary> 或 <div> 里，屏幕阅读器可能用中文音调朗读，RTL 连字也可能断裂。但标签的折叠/展开状态、DOM 结构、事件绑定全都不变。
<h3>lang 和 dir 必须显式加在 summary 和 details 内部元素上</h3>
<p>浏览器不会把 <code> 的语言上下文“透传”给 <details></details> 子树。如果你在中文页面里嵌了一个阿拉伯语 FAQ 条目，必须手动声明：
<details><summary lang="ar" dir="rtl">ما هو المقصود بـ API؟</summary><p lang="ar" dir="rtl">واجهة برمجة التطبيقات هي وسيلة تسمح لبرامج مختلفة بالتحدث مع بعضها...</p> </details>
否则：<summary></summary> 文字可能被错误断行、标点方向错乱、语音合成引擎无法触发阿拉伯语语音模型。
- 只加
dir="rtl"不够——CSS 的direction: rtl只改渲染，不改语言逻辑 - 只加
lang="ar"不加dir，部分浏览器仍按 LTR 渲染连字（尤其旧版 Safari） -
<details></details>根标签上设lang没用，它不是文本容器，不参与语言边界判定
多语言切换时 toggle 事件监听需重绑？不需要
<details></details> 的 toggle 事件与语言无关，切换 document.documentElement.lang 不会销毁或重置它。你用 element.addEventListener('toggle', handler) 绑定一次，只要 DOM 节点没被替换，事件就一直有效。
但要注意：如果语言切换触发了整段 HTML 重渲染（比如用 innerHTML = newHTML），那原生事件监听器会丢失——这不是 <details></details> 的问题，是 DOM 替换的副作用。正确做法是只更新文本节点（textContent）或用 data-i18n 属性做增量更新，保留原有节点和事件。
- 避免在语言切换函数里反复调用
addEventListener，容易重复绑定 - 不要用
onclick="toggleDetails()"写内联 handler，它无法响应动态插入的<details></details> - 如果用了框架（如 Vue），确保
<details></details>不被v-if销毁重建
RTL 语言下 summary 的点击热区与可访问性陷阱
在 lang="he" 或 lang="ar" 下，<summary></summary> 的默认小三角图标出现在右侧，但用户习惯点击左侧文字区域来展开——这会导致热区错位。更严重的是，某些屏幕阅读器（如 NVDA + Firefox）在 RTL 模式下，可能把 <summary></summary> 的可点击范围识别为“从右往左”，导致焦点顺序异常。
解决方案不是删掉小三角，而是用 CSS 显式控制：
summary:lang(ar) ::marker,
summary:lang(he) ::marker {
content: "▶";
}
summary:lang(ar) {
text-align: right;
direction: rtl;
}
- 别用
list-style: none然后自己画箭头——这会破坏语义，辅助技术可能忽略该控件的可交互性 - 确保
<summary></summary>内容宽度足够，避免阿拉伯语长词撑出容器导致点击失效 - 移动端要保证热区 ≥ 44×44px，RTL 下建议用
padding-inline-start而非padding-left
最易被忽略的一点：语言切换后，<details></details> 的 open 状态不会重置，但它的视觉表现（比如箭头朝向）可能因 CSS 未适配 RTL 而看起来“卡住”。检查你的 ::marker 规则是否覆盖了所有目标语言，而不是只写 summary[dir="rtl"]。
