默认支持空格/enter键展开收起且原生可访问，无需额外js；手动控制须用toggleattribute("open")并手动聚焦，禁用open=赋值或click()模拟。
details 标签默认支持空格和 Enter 键展开/收起
不需要额外 JavaScript，<details></details> 是原生可访问的 HTML 元素，浏览器已内置键盘操作支持。聚焦到 <summary></summary> 上后，按 Space 或 Enter 即可切换展开状态——这是 WAI-ARIA 实践规范要求的行为，所有现代浏览器（Chrome、Firefox、Safari、Edge）均遵守。
常见误操作是给 <summary></summary> 加了 tabindex="-1" 或覆盖了默认 role="button"，导致键盘失焦或事件被拦截。只要不主动破坏语义，就无需“添加”快捷键。
手动触发时必须调用 toggleAttribute("open") 而非直接设 open
如果业务逻辑需要在 JS 中控制开关（比如响应全局热键 Ctrl+Shift+D），不能写 el.open = true，因为该属性是只读的反映值；正确做法是操作 HTML 属性：
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
const details = document.querySelector('details');
if (details) {
details.toggleAttribute('open'); // ✅ 正确：触发原生 toggle 行为
// details.setAttribute('open', ''); // ❌ 错误：仅设属性，不触发 expand/collapse 事件
}
}
});
-
toggleAttribute("open")会同步更新 DOM、触发toggle事件，并保持焦点在<summary></summary>上 - 直接
setAttribute("open", "")或removeAttribute("open")不会触发toggle事件，且可能破坏屏幕阅读器的状态同步 - 不要用
click()模拟点击——它绕过键盘语义，对辅助技术不友好
自定义快捷键需避免与浏览器/系统冲突
例如绑定 F1 会打开浏览器帮助页，Alt+D 在 Chrome 中聚焦地址栏。真实项目中推荐使用低冲突组合：
- 优先选
Ctrl+Alt+字母（如Ctrl+Alt+O） - 避开
Ctrl+C/V/X/Z等通用编辑键 - 在
keydown中用e.preventDefault()阻止默认行为，但仅限你明确接管的场景 - 务必测试 macOS 下
Cmd替代Ctrl的兼容性（e.metaKey要参与判断）
focus 管理容易被忽略：展开后应保持焦点在 <summary></summary>
原生 <details></details> 在用户按键展开后，焦点仍停留在 <summary></summary> 上，方便连续操作。但如果你用 JS 手动 toggleAttribute("open")，焦点不会自动维持——尤其当 <details></details> 内容区有 autofocus 元素时，焦点会被抢走。
解决方法很简单：
details.toggleAttribute('open');
if (details.hasAttribute('open')) {
details.querySelector('summary').focus(); // ✅ 强制回归 summary
}
这个细节在键盘导航流程中非常关键：否则用户按完快捷键，再按 Tab 就跳进内容区首元素，而非继续操作其他 <summary></summary>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
