用 <details> 和 <summary> 可原生实现可展开脚注，语义清晰、无障碍友好；需确保 <summary> 含可见文本，脚注内容置于其后，慎用 open 属性，CSS 微调可提升样式一致性，IE 中可通过 @supports 降级为常开状态。
用 <details> 和 <summary> 实现可展开脚注
直接用原生 HTML 就能做，不需要 JS 或 CSS 框架。浏览器支持已很成熟（Chrome 12+、Firefox 49+、Safari 6.1+、Edge 79+），移动端也完全可用。
核心是把脚注内容包在 <details> 里，用 <summary> 做触发文字。默认收起，点击后展开——语义清晰，无障碍友好，还能被屏幕阅读器识别为“可切换区域”。
常见错误是把 <summary> 写成空标签或只放图标，导致无文字提示；或者把整个段落塞进 <summary>，造成点击区域过大、语义混乱。
-
<summary>必须有可见文本内容（哪怕只是“ⓘ”加空格），否则键盘用户无法聚焦，屏幕阅读器读不出作用 - 脚注正文写在
<summary>标签之后、</details>之前，不能嵌套在<summary>内部 - 如需默认展开，加
open属性：<details open>，但慎用——多数脚注本意就是“按需查看”
样式微调：让脚注更像传统 footnote
原生 <details> 默认样式偏简陋，比如箭头方向不统一、无缩进、无分隔线。用几行 CSS 就能贴近出版物脚注感：
details {
margin: 0.5em 0;
padding-left: 1.2em;
border-left: 2px solid #999;
}
summary {
cursor: pointer;
font-style: italic;
font-size: 0.9em;
color: #555;
}
summary::marker {
content: "ⓘ ";
color: #777;
}
注意点：
-
summary::marker在 Safari 15.4+ 才稳定支持，旧版 Safari 可改用<span>ⓘ</span>写死图标 - 避免给
<details>设固定高度或overflow: hidden，否则展开动画会被截断 - 如果页面用了 CSS 重置（如 normalize.css），检查是否清除了
summary的默认list-style，必要时手动恢复
与传统 <sup> 脚注联动的写法
很多网页用 <sup> 标数字（如“术语1”），再在文末列解释。这时可以把 <details> 当作动态替代方案，保持行内引用不变，只替换解释部分：
AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。
原文：<p>这是个专业术语<sup><a href="#fn1">1</a></sup>。</p>
改成：<p>这是个专业术语<sup><details id="fn1"><summary>1</summary>指……具体定义。</details></sup>。</p>
这样既保留上标编号视觉习惯，又实现点击即看。关键细节：
- 把
id放在<details>上而非<summary>，方便锚点跳转和 JS 控制 - 编号（如“1”）必须写在
<summary>内，否则不可点击，且无法被聚焦 - 不要用
<a href="#fn1">包裹<summary>，会破坏语义和键盘导航逻辑
兼容性兜底和可访问性提醒
IE 完全不支持 <details>，但可以靠 CSS 渐进增强让它“退化”为常开状态，不影响信息获取：
@supports not (display: details) {
details { display: block; }
summary { display: block; cursor: default; }
}
真正容易被忽略的是焦点管理：用户用 Tab 键进入 <summary> 后，按回车/空格应触发展开，这是浏览器原生行为，无需额外 JS。但如果你加了自定义事件监听，反而可能覆盖默认逻辑，导致键盘用户无法操作。
另外，脚注内容若含交互元素（如链接、按钮），确保它们在展开后可 tab 到达——某些旧版 Safari 对 <details> 内 focusable 元素的支持有延迟，可加 tabindex="-1" 并在展开后用 JS 聚焦到第一个子元素作为补救。
