HTML如何实现参数折叠展开？details标签使用教程

为什么不用 JS 写 toggle？

纯 HTML 方案更轻量、可访问性好（支持键盘 Enter / Space 展开）、服务端渲染友好，且在 SSR 或静态页面里零成本生效。JS 实现反而容易漏掉焦点管理、状态同步或 SSR 不一致问题。

常见错误现象：aria-expanded 手动维护不同步、折叠后表单控件仍被提交、屏幕阅读器读不出状态变化。

• 自带语义化展开/折叠状态，浏览器原生支持
• 默认收起，加 open 属性可默认展开
• 不支持 IE，但现代项目基本不需兼容 IE

怎么把 query 参数塞进

？

适合放「可选参数」——比如 API 文档里的 page、sort、include_deleted 这类非必填字段。别把必填项藏进去，否则用户可能漏填。

使用场景：API 参考页、调试工具表单、低代码参数配置面板。

• 每个参数用 + <input> 组合，放在
  内部
• 里写清作用，例如 “高级过滤选项” 或 “分页与排序”
• 避免在
  里放交互元素（如按钮），会干扰展开逻辑

<details>
  <summary>可选查询参数</summary>
  <label>
    每页数量：
    &lt;input type=&quot;number&quot; name=&quot;per_page&quot; value=&quot;10&quot;&gt;
  </label>
  <label>
    排序字段：
    &lt;select name=&quot;sort&quot;&gt;
      <option value="created_at">创建时间</option>
      <option value="name">名称</option>
    &lt;/select&gt;
  </label>
</details>

样式和兼容性要注意什么？