details标签默认不支持点击外部关闭，需用javascript监听全局点击事件，判断目标是否在details内部，若不在且非summary则设open=false，并建议用pointerdown防重复触发。
details标签默认不支持点击外部关闭，必须手动控制
<details></details> 是原生可折叠组件，但它的 open 状态只响应自身 <summary></summary> 的点击，点击页面其他地方不会自动收起。浏览器没提供内置机制，得靠 JS 监听并手动切换 open 属性。
用 document.addEventListener('click') 捕获全局点击并判断目标
核心思路是：监听整个文档的点击事件，检查点击目标是否在当前 <details></details> 内部；如果不是，就把它设为 open = false。注意要排除 <summary></summary> 自身（否则点标题会先开再关）。
实操建议：
- 给每个
<details></details>加上唯一id或统一 class（如class="collapsible"），方便批量操作 - 使用
event.target.closest('details')判断点击是否落在某个<details></details>内部 - 避免重复绑定：只在 DOM 加载完成后执行一次监听，不要在循环里反复
addEventListener - 如果页面有多个
<details></details>，要遍历所有已打开的，逐个检查是否需要关闭
document.addEventListener('click', (e) => {
const allDetails = document.querySelectorAll('details[open]');
allDetails.forEach(details => {
if (!details.contains(e.target) && e.target.tagName !== 'SUMMARY') {
details.open = false;
}
});
});
移动端点击 summary 可能触发两次，需防抖或判断 event.detail
在 Safari 和部分 Android 浏览器中，快速点击 <summary></summary> 可能导致 click 事件触发两次，造成“点一下开、再点一下关、又点一下开”的错乱。这不是 bug，而是 pointer/click 事件层叠所致。
稳妥做法：
- 不用
click，改用pointerdown（更底层，通常只触发一次） - 加简单节流：记录上次处理时间，间隔
150ms内忽略后续事件 - 或直接检查
e.detail === 0（原生 summary 点击时 detail 为 1，JS 触发的为 0）
focus/blur 不适合替代 click 来控制 open 状态
有人尝试监听 blur 事件来关闭，但 <details></details> 本身不可聚焦，<summary></summary> 虽可聚焦，但失去焦点不等于用户想关闭——比如从 summary 切到另一个 input，不该自动收起。这个逻辑和用户预期不符，容易误关。
真正可靠的方式只有显式监听点击 + 区域判断。另外注意：如果页面用了 Shadow DOM 或 iframe，contains() 需额外处理跨上下文节点访问。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
