用 + 可原生实现运费规则折叠，语义化强、无障碍友好； 仅放标题，内容置于外部，加 open 属性默认展开；不参与表单提交，需另用 hidden input 传值。
HTML里怎么用details实现运费规则折叠
直接用 <details></details> + <summary></summary> 就行，不用 JS、不依赖框架，原生语义化支持好，屏幕阅读器也认得。
常见错误是把内容塞进 <summary></summary> 里（它只该放标题），或者忘了加 open 属性导致默认收着——用户第一眼看不到规则，容易误以为没运费说明。
-
<summary></summary>里只放简短提示，比如「查看运费计算规则」，别写长段落 - 想默认展开？加
open属性：<details open></details> - 里面可以嵌任意 HTML，但避免放交互控件（如表单按钮），部分旧浏览器对
<details></details>内的 focus 行为支持不稳
<details> <summary>查看运费计算规则</summary> <p>订单满 <code>99</code> 元包邮；不足则按重量计费：<code>0.5</code> 元/公斤，最低 <code>3</code> 元</p> </details>
为什么不用display: none自己手写折叠
手动切 display 状态看着灵活，实则绕开语义、丢掉可访问性，还得多写 JS 绑定点击和 ARIA 属性。
立即学习“前端免费学习笔记（深入）”；
比如用 aria-expanded 和 aria-controls 模拟 <details></details>，稍有疏漏就会让读屏软件报错或跳过内容。Chrome、Safari、Firefox 都已稳定支持 <details></details>（IE 全系不支持，但 IE 已淘汰）。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 移动端 Safari 对
<details></details>的 touch 响应比自定义click更顺滑 - 无需监听
click或keydown，浏览器自动处理空格/回车展开 - 如果真要兼容 IE，建议降级为纯静态文本，而不是硬套 JS 折叠——运费规则不是高频操作区，没必要为 IE 增加维护成本
details在表单中能直接提交运费数据吗
不能。<details></details> 是纯展示容器，不参与表单序列化，里面放 <input> 也不会被 form.submit() 收集。
运费规则说明和运费实际计算逻辑必须分开：前者用 <details></details> 折叠展示，后者用隐藏字段或 JS 动态写入 <input type="hidden">。
- 别把
<input name="shipping_fee">塞进<details></details>里指望它提交——它会提交，但和折叠功能无关，纯属巧合 - 如果运费要根据用户选择实时变（如选省份），规则说明保持静态，计算逻辑走 JS + hidden input
- 服务端永远以接收到的字段为准，不能信任前端折叠区域里“看起来被用户看到了”就认为规则已被确认
折叠区域样式微调要注意什么
浏览器默认给 <summary></summary> 加了小三角，但不同内核渲染位置、旋转方向不一致（比如 Firefox 默认在左，Chrome 在右）。想统一，得重置 list-style 并用伪元素补图标。
另外，<details></details> 展开时高度是内容撑开的，CSS 动画对 height 不生效（因为是 auto），只能靠 max-height 过渡，但需预估最大高度，否则动画卡顿。
- 去掉默认箭头：
summary { list-style: none; } - 加自定义图标用
::marker（较新）或::before（兼容性更好） - 动画慎用：优先用
transition: padding .2s, opacity .2s配合overflow: hidden，比硬调max-height可靠
规则文本本身别塞太多动态内容，比如实时价格倒计时或接口加载中的占位符——折叠区域该是确定性说明，不是操作面板。
