details 默认收起，需加 open 属性才能默认展开；summary 内嵌图标易致点击失效，推荐伪元素添加；JS 应操作 open 属性而非 class，并监听 toggle 事件；原生下箭头样式受限，自定义需权衡语义与控制力。
details 标签本身不支持默认展开
直接写 标题
内容open 属性：
summary 里放图标要小心点击区域失效
或其他非文本元素，某些浏览器（尤其是旧版 Safari）可能无法响应点击。稳妥做法是：
- 用 CSS 的
::before或::after伪元素添加图标，不破坏 - 如果必须内联图标，确保父级
display: flex或display: inline-flex，并给图标加pointer-events: none
JavaScript 控制展开状态要改 open 属性，不是 class
open 属性控制，不是靠 class 切换。用 JS 操作时：
- 展开：
el.setAttribute('open', '')或el.open = true - 收起：
el.removeAttribute('open')或el.open = false - 监听变化：用
toggle事件，不是click—— 因为键盘空格/回车也能触发
const details = document.querySelector('details');
details.addEventListener('toggle', () => {
console.log('当前状态：', details.open);
});
样式定制受限，不能直接改 summary 下箭头
浏览器对
立即学习“前端免费学习笔记（深入）”；
- 用
list-style: none+appearance: none清除部分浏览器默认样式 - 把原生箭头用
summary::marker隐藏（仅 Firefox 支持；Chrome/Safari 尚未实现） - 最可靠方案：完全自定义，用
替代details.open—— 牺牲一点语义，换来 100% 可控
真正难的不是怎么写出来，而是判断什么时候该坚持语义用原生 details，什么时候该退一步手写 toggle 逻辑。前者利于无障碍和 SEO，后者胜在样式和交互自由度。别硬套。
