首页 > 文章 > 前端

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

时间：2026-04-03 23:18:32 462浏览收藏

HTML 的 `
` 和 `
` 标签提供了一种原生、轻量且可访问性极佳的方式，无需 JavaScript 即可实现查询参数（如 page、sort、include_deleted 等可选字段）的折叠展开功能，天然支持键盘操作（Enter/Space）、SSR 友好、语义清晰；但需注意避免将必填项隐藏其中，警惕 `display: none` 导致内容不可访问，同时理解收起状态下的表单控件仍会提交数据——这些细节恰恰是提升用户体验与无障碍兼容性的关键所在。

HTML怎么实现查询参数折叠展开_HTML details包裹可选参数【操作】

用

和

就能原生实现查询参数的折叠展开，不需要 JS，也不依赖框架。

为什么不用 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>