直接用作卡片底部展开区完全可行，需保持其在合法流式容器末尾、避免脱离文档流，并通过max-height动画实现平滑展开，同时注意可访问性与防重复请求。
details标签直接用作卡片底部展开区完全可行
只要卡片容器是合法的流式上下文（比如 <article></article>、<section></section> 或普通 <div>），把 <code><details></details> 放在卡片末尾就是最自然的做法。它不破坏语义，不干扰布局流，也不需要额外 wrapper —— 不是“模拟”，而是浏览器原生认定的「可披露内容」。
常见错误是给卡片加 position: relative 后再对 <details></details> 做 absolute 定位，结果导致焦点丢失、键盘无法操作、屏幕阅读器跳过。原生交互依赖正常的 DOM 顺序和渲染流，强行脱离文档流就等于放弃所有可访问性保障。
示例结构干净直接：
<article class="card">
<h3>配置指南</h3>
<p>适用于 v2.4+ 版本的快速上手说明。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<details>
<summary>▸ 查看高级配置项</summary>
<ul>
<li><code>timeout</code>: 默认 5000ms，可设为 <code>0</code> 禁用超时</li>
<li><code>retry</code>: 最大重试次数，支持字符串 <code>"auto"</code></li>
</ul>
</details>
</article>
summary放在卡片底部时的视觉与交互要点
用户习惯从上往下扫视，所以 summary 文字要明确传达“这是额外信息”，避免用模糊词如“更多”或“详情”。推荐带符号前缀（如 ▸、▶）或动词短语（如“显示调试日志”“展开兼容性说明”）。
-
summary必须是<details></details>的第一个子元素，否则点击无效；不能包裹在<p></p>或<span></span>里 - 不要给
summary设display: block或inline-flex—— 这会剥离其role="button"和键盘焦点能力 - 移动端点按区域至少保证 44×44px，可通过
padding扩展点击热区，别只靠文字大小撑空间 - 若卡片本身有 hover 效果（如阴影加深），记得给
details[open] summary单独定义 hover 样式，否则展开后悬停态会消失
动态加载详情内容时 toggle 事件怎么写才不重复请求
卡片底部展开常用来加载日志、API 响应或长列表，这时不能在每次 toggle 事件里无条件 fetch。浏览器触发 toggle 的时机包括：用户点击、键盘空格/回车、JS 设置 open = true —— 但状态变化后立即读 detailsEl.open 可能拿到旧值（尤其在微任务队列中）。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
安全做法是用 queueMicrotask 延迟读取，并加标记防重：
const detailsEl = document.querySelector('.card details');
let loaded = false;
detailsEl.addEventListener('toggle', () => {
queueMicrotask(() => {
if (detailsEl.open && !loaded) {
fetch('/api/debug-info')
.then(r => r.text())
.then(html => {
detailsEl.querySelector('summary').insertAdjacentHTML('afterend', html);
loaded = true;
});
}
});
});
注意：不要在 toggle 回调里直接操作 innerHTML 或插入 script 标签，有 XSS 风险；服务端返回纯 HTML 片段即可。
CSS 动画控制展开高度必须绕开 height: auto
<details></details> 自身不支持 height 过渡，因为 height: auto 无法参与 CSS 动画计算。硬写 transition: height 0.3s 会导致收起时瞬间坍塌、展开时无动画。
正确解法是用 max-height + overflow: hidden 模拟，关键在数值设定：
- 设太小（如
max-height: 100px）：内容多时会被截断，出现滚动条或溢出 - 设太大（如
max-height: 1000px）：收起动画变慢，因为要从 1000px 缩到 0 - 推荐值：根据卡片常见内容行数估算，例如 6 行文本 ≈
max-height: 180px（含行高） - 必须配
overflow: hidden，否则动画期间内容会撑开容器
样式片段示例：
details {
overflow: hidden;
}
details[open] {
animation: open-height 0.3s ease-out forwards;
}
@keyframes open-height {
from { max-height: 0; opacity: 0; }
to { max-height: 180px; opacity: 1; }
}
真正难处理的是内容高度不确定又必须动画的场景——此时不如放弃动画，用 opacity + transform 做淡入滑下，更稳定也更省性能。
