details标签默认不响应回车键，因浏览器仅原生支持空格键切换，Enter需手动监听keydown并设置open属性，同时注意tabindex聚焦、aria-expanded同步及避免嵌套误触发。
details 标签默认不响应回车键，为什么？
因为 <details> 是原生语义化标签，但浏览器只给它绑定了空格键（Space）的展开/收起行为，对 Enter 键无任何处理。很多用户（尤其屏幕阅读器使用者或习惯键盘导航的人）会自然按回车触发，结果没反应——这不是 bug，是规范现状。
监听 keydown 并手动切换 open 状态
最直接的方式是在 <details> 上监听 keydown，捕获 Enter（event.key === 'Enter'），然后调用 element.open = !element.open。注意必须用 keydown（不是 keypress 或 keyup），否则可能和浏览器默认行为冲突或错过事件。
实操建议：
- 用
event.preventDefault()阻止表单提交等副作用（尤其当<details>在<form>内时） - 只处理聚焦态下的
Enter：可加tabindex="0"确保它能被键盘聚焦，否则监听了也收不到事件 - 避免重复绑定：用
addEventListener时检查是否已存在 handler，或统一用事件委托
示例代码：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
document.querySelectorAll('details').forEach(details => {
details.setAttribute('tabindex', '0');
details.addEventListener('keydown', e => {
if (e.key === 'Enter') {
e.preventDefault();
details.open = !details.open;
}
});
});
兼容性与 focus 状态的细节问题
部分旧版 Safari（≤15.4）对 <details> 的 tabindex 支持不稳定，可能导致聚焦后无法触发 keydown。此时需 fallback 到监听 details 的父容器，用 event.target.matches('details') 过滤。
另外，屏幕阅读器（如 NVDA、VoiceOver）依赖 aria-expanded 同步状态。虽然原生 open 属性会自动映射到 aria-expanded，但手动切换后某些旧读屏器仍可能滞后。稳妥做法是显式同步：
details.open = !details.open;
details.setAttribute('aria-expanded', details.open);
还有个易忽略点：如果 <details> 内部有 <summary>，且该 <summary> 自身设了 tabindex，焦点可能落在 summary 上而非 details，这时监听要挂在 <summary> 上，并用 details.toggleAttribute('open') 触发。
要不要用 click 模拟？不推荐
有人尝试用 details.dispatchEvent(new MouseEvent('click')) 来复用原生逻辑，但这会引发两个问题：一是可能触发 <summary> 上额外绑定的 click handler；二是某些浏览器中，click 事件不会像空格键那样自动聚焦 <summary>，导致键盘导航链断裂。直接操作 open 属性更可控、副作用更少。
真正麻烦的是嵌套 <details> 场景——子级展开时，父级若也监听了 Enter，容易误触发。这时候得靠 event.stopPropagation() 或判断 e.target === details 做精确拦截。
