HTML怎么实现查询参数折叠展开_HTML details包裹可选参数【操作】-html教程-PHP中文网

原生和可实现查询参数折叠展开，轻量、可访问性好、ssr友好；适合放置 page、sort 等可选参数，需避免必填项隐藏及 display: none 误用。

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

用 <details></details> 和 <summary></summary> 就能原生实现查询参数的折叠展开，不需要 JS，也不依赖框架。

为什么不用 JS 写 toggle？

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

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

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

怎么把 query 参数塞进 `<details></details>`？

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

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

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

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

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

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

<details></details> 在 Chrome/Firefox/Safari/Edge 均已稳定支持（2020 年后版本无风险），但默认样式简陋，且 Safari 对 <summary></summary> 的点击热区稍小。

用 summary::marker 控制箭头（注意 Safari 需加 -webkit-details-marker）
给 <summary></summary> 加 cursor: pointer 提升可感知性
不要用 display: none 隐藏 <details></details>，会导致内容不可访问；改用 hidden 或 CSS visibility
如果需要动画展开，得用 JS 监听 toggle 事件 + max-height 过渡（原生无动画）