details标签不支持原生点击波纹，需用JS监听summary的click事件动态计算点击坐标，结合position: relative与::after伪元素缩放动画实现兼容性最佳的波纹效果。
details标签本身不支持原生点击波纹
HTML <details> 是语义化折叠组件，浏览器只提供默认的箭头展开/收起行为，没有内置波纹（ripple）效果。所谓“点击波纹”，其实是 CSS 模拟的视觉反馈，必须手动添加，且不能依赖 :active 简单实现——因为 <summary> 在部分浏览器中点击时不会稳定触发 :active（尤其 Safari 和 Firefox 对 <summary> 的激活态处理不一致）。
用伪元素 + transition 模拟波纹最可靠
核心思路是：监听 <summary> 的点击，用 JS 添加一个临时类，CSS 通过 ::after 绘制圆形遮罩并缩放动画。这是目前兼容性最好、行为最可控的方式。
- 必须给
<summary>设置position: relative，否则波纹定位会错乱 - 波纹圆心需动态计算点击坐标，不能写死为
50% 50%，否则在长文本或右对齐的<summary>上偏移明显 - 动画时长建议 ≤ 300ms，过长会干扰用户对折叠动作的感知
- 务必加
pointer-events: none到波纹伪元素上，避免遮挡后续点击
.summary-ripple {
position: relative;
}
.summary-ripple::after {
content: "";
position: absolute;
border-radius: 50%;
background: rgba(0, 0, 0, 0.1);
transform: scale(0);
transform-origin: center;
pointer-events: none;
transition: transform 0.25s ease-out;
}
.summary-ripple.ripple-active::after {
transform: scale(1);
}JS 必须监听 summary 的 click 并计算点击点
不能用 mousedown 或 touchstart——<summary> 的折叠逻辑由浏览器在 click 时触发，只有在这里插入波纹类，才能和真实交互节奏对齐。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 获取
event.clientX / clientY相对于<summary>左上角的偏移，再减去getBoundingClientRect()的 left/top - 把计算出的
x、y作为left和top设置到伪元素上（需 JS 动态写内联 style） - 添加类后，用
setTimeout在动画结束后移除类，避免类堆积 - 注意处理 touch 设备：
event.touches[0]取坐标，但要 fallback 到clientX/Y
Firefox 和 Safari 的细节差异要单独处理
Firefox 默认阻止 <summary> 上的 :active 样式；Safari 在 <details open> 状态下首次点击 <summary> 可能不触发事件冒泡。这些都会导致波纹失效。
立即学习“前端免费学习笔记（深入）”；
- 给
<summary>加user-select: none，防止双击选中文本打断波纹流程 - 在
click回调里显式调用event.preventDefault()（仅当需要阻止默认折叠时才用；一般不用，因为波纹只是装饰） - 如果页面有全局
* { box-sizing: border-box }，确保波纹伪元素也继承，否则 padding/margin 计算偏差
波纹不是功能必需，但一旦加了，就必须覆盖所有触发路径——包括键盘 Enter/Space 展开。这点容易被忽略，结果只在鼠标点击时有动画，键盘用户完全无反馈。
