标签原生支持折叠展开，无需JavaScript；必须为首个子元素，用::before伪元素自定义箭头最兼容；JS应操作open属性并监听toggle事件；IE不支持需polyfill，无障碍需保留语义与焦点。
details 标签本身就能实现折叠，不需要 JS
直接用
常见错误是手动加 onclick 或监听 click 事件去控制 display，这反而破坏了可访问性（如屏幕阅读器无法识别状态）和语义结构。
-
open属性可设为默认展开 -
- 点击
如何自定义 summary 的箭头和样式
浏览器对 ::marker 或私有伪类（如 Chrome 的 ::-webkit-details-marker）控制，不能用普通 CSS 覆盖所有场景。必须重置并手动添加图标才可靠。
注意：::marker 在部分旧版 Safari 中不生效，::-webkit-details-marker 仅限 WebKit 内核；统一用 ::before 是最兼容的方案。
立即学习“前端免费学习笔记（深入）”；
JavaScript 控制 open 状态时要注意什么
虽然原生行为已足够，但若需程序化控制（比如按钮触发、表单提交后自动展开错误项），应操作 open 属性而非 class 或 style。
- 用
element.open = true或element.setAttribute('open', '')，不要写element.style.display = 'block' - 监听状态变化应使用
toggle事件（非click），它在用户交互或 JS 修改open后都会触发 -
toggle事件没有取消默认行为的机制，也不需要 —— 它只是通知状态已变
const detailsEl = document.querySelector('details');
detailsEl.addEventListener('toggle', () => {
console.log('当前状态：', detailsEl.open);
});兼容性和无障碍要点容易被忽略
IE 完全不支持
无障碍方面：aria-expanded 和焦点管理，但如果你替换了 role="button" 和键盘可聚焦（tabindex="0"），否则键盘用户无法操作。
真正复杂的地方不在“怎么写”，而在于「要不要用」—— 如果需要动画过渡、嵌套折叠、或服务端渲染时动态控制初始状态，
