details的点击区域默认很小，因浏览器仅响应summary内文本或图标的实际渲染尺寸（不含padding），属规范限制；可通过padding+cursor:pointer视觉优化，或JS监听details点击并手动toggle open来扩展热区，但需补全键盘与无障碍支持。
为什么 details 的点击区域默认很小
浏览器对 details 元素的可点击区域，仅限于 summary 标签内文本或图标的实际渲染尺寸（不含 padding），哪怕你给 summary 加了大内边距，原生行为也不响应——这是规范限制，不是 CSS 能直接“撑开”的。
用 cursor: pointer + padding 模拟扩展（最轻量）
虽然点击热区不变，但视觉和交互反馈可以优化：加 padding 让用户更易悬停，再配合 pointer 光标提示可点。关键是要避免触发 summary 内部的 button 或 a 等元素冒泡干扰折叠逻辑。
- 给
summary设置padding: 12px 16px，并显式声明cursor: pointer - 如果
summary里有子元素（比如图标），加上pointer-events: none防止它们拦截点击 - 不要给
summary设display: block或flex后又忘记重置margin，否则可能意外撑高、导致点击错位
<details>
<summary style="padding: 12px 16px; cursor: pointer;">
<span style="pointer-events: none">▶</span> 配置项
</summary>
<p>内容…</p>
</details>
用 JavaScript 手动绑定整个 details 容器（最可靠）
当必须让整个面板标题区域（含左右留白、图标外延）都响应点击时，绕过 summary 的限制，监听 details 自身的点击，再手动 toggle open 属性。
立即学习“前端免费学习笔记（深入）”；
- 监听
details的click事件，检查event.target是否在summary内或就是它本身 - 调用
detailsEl.open = !detailsEl.open，而非detailsEl.toggleAttribute('open')（后者不触发toggle事件） - 记得
event.preventDefault()阻止原生 summary 点击，否则会触发两次
<details id="my-details">
<summary>高级设置</summary>
<p>…</p>
</details>
<script>
const el = document.getElementById('my-details');
el.addEventListener('click', e => {
if (e.target === el || el.querySelector('summary').contains(e.target)) {
e.preventDefault();
el.open = !el.open;
}
});
</script>
兼容性与无障碍要注意什么
用 JS 方式接管后，summary 的语义和键盘支持（空格/回车触发）会丢失，必须手动补全。
- 给
summary加tabindex="0"，确保可聚焦 - 监听
keydown，对Space和Enter键执行相同 toggle 逻辑 - 不要移除
summary标签——屏幕阅读器依赖它识别折叠面板结构 - 避免在
details上设role="button"，这会覆盖原生语义，反而降低兼容性
真正难的不是让区域变大，而是变大之后，还让键盘用户、读屏软件和鼠标用户获得一致反馈。这点常被忽略，一加 padding 就以为完事了。
