原生 HTML 的 details 和 summary 可实现表单分组折叠，无需 JS 或 CSS 框架；summary 必为 details 首子元素，open 属性控制展开状态，折叠不影响表单提交。
用 details 和 summary 最简实现表单分组折叠
原生 HTML 就支持，不需要 JS 或 CSS 框架。浏览器兼容性已覆盖 Chrome 12+、Firefox 49+、Safari 6+、Edge 79+，移动端也稳。
核心是把表单字段包在 details 里，用 summary 做标题栏：
<details> <summary>联系信息</summary> <label>邮箱：<input type="email" name="email"></label> <label>电话：<input type="tel" name="phone"></label> </details>
默认收起，点击 summary 展开。注意：summary 必须是 details 的第一个子元素，否则语义失效，且部分屏幕阅读器无法识别。
让折叠状态可被 JS 控制（比如默认展开或联动）
details 元素有 open 布尔属性，设为 true 即展开：
立即学习“前端免费学习笔记（深入）”；
<details open> <summary>地址信息</summary> <input name="address"> </details>
JS 操作也很直接：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
el.open = true或el.open = false直接赋值 -
el.toggleAttribute('open')切换状态（注意不是toggleAttribute('open', bool)） - 监听
toggle事件可响应用户点击：el.addEventListener('toggle', () => {...})
别用 el.setAttribute('open', '') —— 这不会触发渲染更新，只改 DOM 属性，视觉不变。
样式定制难点：summary 箭头和折叠动画
浏览器默认在 summary 左侧加一个三角箭头，但没法用 CSS 直接改它的颜色或大小。必须先用 list-style: none 清掉，再用伪元素重绘：
details summary {
list-style: none;
}
details summary::marker {
content: "▶ ";
}
details[open] summary::marker {
content: "▼ ";
}
折叠动画不能直接对 details 加 transition —— 它不支持 height 动画，因为内部高度是动态计算的。真要动效，得用 JS 测高 + max-height 过渡，或者用 clip-path 模拟，但会增加复杂度和兼容性风险。
表单提交时 collapsed 的字段还有效吗？
有效。details 只影响视觉和可访问性状态，不影响表单控件的提交行为。只要 input 在文档流中（没被 display: none 或 disabled），就会随表单一起提交。
但要注意两个易错点：
- 别把
input放在summary里 —— 它们会被当成标题内容，失去表单语义，也不参与提交 - 如果用 JS 动态插入字段，确保插入后 DOM 已就绪，否则可能漏提交（尤其在
details[open]为 false 时插入）
折叠/展开本质是 UX 层的事，HTML 表单逻辑完全独立。别为了“看起来分组”而套两层 fieldset 再加 JS 控制显隐，反而绕远了。
