details标签使用指南：实现可折叠内容的语义化方法

实操建议：

• 需要自定义点击行为时，用 event.target === event.currentTarget 判断是否点在 summary 外围区域
• 想改箭头图标？别动 summary::marker（部分浏览器不支持），改用 summary::before + details[open] 切换 content
• 避免对
  设置 height、overflow 或 transform，否则动画卡顿或内容被裁剪

如何让 details 默认展开且禁用用户切换？

加 open 属性即可默认展开，但“禁用切换”没有原生属性——浏览器不提供 disabled 或 readonly。强行禁用得靠 JS 拦截，但要注意副作用。

实操建议：

• 仅视觉上禁用：加 pointer-events: none 到
  ，同时设 tabindex="-1" 防键盘触发
• 真禁用交互：监听 toggle 事件，调用 event.preventDefault()，但需注意 Safari 旧版本不支持该事件
• 服务端渲染时别只靠 open 控制状态，JS 脚本可能晚于 DOM 渲染，导致闪动；优先用 CSS details:not([open]) > *:not(summary) 隐藏内容

details + summary 在表单中提交时会不会传值？

不会。