details元素默认无关闭按钮，需在summary内添加button[type="button"]并用event.stopPropagation()阻止默认切换，配合CSS或JS实现关闭功能。
details 元素默认不提供关闭按钮，得靠 summary 和 CSS/JS 配合实现
details 本身只支持点击 summary 切换展开/收起状态，没有原生“关闭”按钮。所谓“带关闭按钮的折叠卡片”，本质是用额外按钮触发 details.open = false，或模拟关闭行为。
常见错误是直接在 summary 里塞一个 × 按钮却没阻止默认事件，结果点一下就收起、再点一下又展开，关不了——因为 summary 的点击始终会翻转 open 状态。
- 必须用
event.stopPropagation()阻止关闭按钮触发父级details的切换逻辑 - 关闭按钮应放在
summary内部，但不能是summary的唯一可交互内容（否则影响可访问性） - 推荐用
button[type="button"]而非span或div，保证键盘可聚焦、可按空格/回车触发
如何用纯 HTML + CSS 实现基础关闭按钮（无 JS）
纯 CSS 方案只能靠 :has() 检测状态并隐藏/显示按钮，但目前 :has() 在部分旧浏览器（如 Safari
所以严格来说，**纯 HTML/CSS 无法实现真正的关闭按钮交互**。所谓“纯 CSS 方案”，实际是妥协：用 summary 的点击行为 + 视觉反馈模拟关闭感，比如：
立即学习“前端免费学习笔记（深入）”；
<details> <summary>标题 <span class="close-btn" aria-hidden="true">×</span></summary> <p>内容</p> </details>
然后用 CSS 控制 .close-btn 在展开时透明、收起时可见，但这不是真关闭，只是视觉提示——用户仍需再点一次 summary 才能收起。
用 JavaScript 实现可靠关闭按钮（推荐方案）
给关闭按钮绑定点击事件，手动设 details.open = false，并阻止事件冒泡。这是最可控、兼容性好、语义清晰的做法。
- 关闭按钮必须加
type="button"，避免表单提交干扰 - 用
closest("details")获取父级details，方便复用到多个卡片 - 记得加
aria-label="关闭"提升可访问性
<details>
<summary>
标题
<button type="button" class="details-close" aria-label="关闭">×</button>
</summary>
<p>卡片内容</p>
</details>
document.querySelectorAll(".details-close").forEach(btn => {
btn.addEventListener("click", e => {
e.stopPropagation();
const details = btn.closest("details");
if (details) details.open = false;
});
});
为什么不能用 details.open = false 以外的方式强制收起
有人试过用 removeAttribute("open") 或 setAttribute("open", "")，但这些操作不可靠：
-
removeAttribute("open")在已展开的details上无效——DOM 属性和 JS 属性不同步，open是布尔属性，移除属性不等于设为false -
setAttribute("open", "")反而会强制展开（空字符串被当作真值） - 只有直接赋值
details.open = false才能准确控制状态，且会同步更新 DOM 属性和样式
另外，如果卡片嵌套或动态生成，记得在插入 DOM 后再绑定关闭事件，或者用事件委托避免重复监听。
