details内表单控件默认参与提交，需用toggle事件同步disabled状态并设aria-disabled；嵌套不宜超2层，避免safari兼容问题，且须与后端明确空值处理契约。
details 标签里的表单控件默认会随表单提交，视觉收起 ≠ 逻辑禁用。这是最常被忽略的前提，不处理会导致后端收到意外字段或空值。
折叠区域内的 input、select 是否参与提交？
会参与。浏览器不因 details 折叠而改变子元素的表单参与性——只要控件在 DOM 中且未设 disabled 或 name 为空，就会随 form 提交。
-
name属性必须存在，否则字段根本不会出现在提交数据中（例如<input name="extra_note">） - 折叠状态下
<textarea required></textarea>仍会触发 HTML5 校验，用户点提交时弹出“请填写此字段”提示 - 若想“收起即不提交”，不能只靠视觉隐藏，必须手动设
input.disabled = true，并在toggle事件中同步开关 - 后端若能安全忽略空值或未传字段（如
extra_note=或字段缺失），前端可不做干预——但需与后端明确契约，不能假设“看不见就不会传”
如何用 toggle 事件联动表单控件状态？
监听 details 元素的 toggle 事件，比监听 click 更可靠：它覆盖键盘操作（Space/Enter）、状态真实变更时机，且在所有支持 details 的浏览器中行为一致。
- 不要写
summary.addEventListener('click', ...)—— 键盘用户无法触发，且事件可能在 open 状态变更前就执行 - 正确写法：
details.addEventListener('toggle', e => { if (e.target.open) { /* 展开时启用控件 */ } else { /* 收起时禁用 */ } }) - 禁用时建议同时设
aria-disabled="true"，增强可访问性提示 - 避免批量操作所有子控件：只处理有
name的表单控件，跳过<p></p>、<div> 等非表单元素<h3>嵌套 <code>details与表单共存时的兼容性陷阱把多层
details塞进一个form标签里，在旧版 Safari 和部分 EdgeHTML 中可能引发问题：summary 被错误识别为表单控件，导致提交时带上空值或干扰submit事件。- 不要将整个导航树或复杂折叠结构包裹在同一个
form内；按功能域拆分form，比如工单主体用一个form，附件上传另起一个 - Safari iOS 15.4 之前对 >2 层嵌套的
toggle事件触发不稳定，可能漏掉某层状态变化，建议控制在 2 层以内 - 若必须深层嵌套，避免在
summary中放input或button——它们会破坏焦点流，且某些 WebView 下点击热区失效 - 测试时务必用 Tab 键遍历：确保每层
summary都能被聚焦，且 Space/Enter 可触发，否则屏幕阅读器用户无法操作
真正难的不是让
details动起来，而是让它和表单语义、可访问性、后端契约严丝合缝地咬合——任何一处松动，都会在用户提交那一刻暴露出来。 - 不要将整个导航树或复杂折叠结构包裹在同一个
