HTML怎么做筛选面板展开_html筛选面板展开折叠方法【小技巧】-html教程-PHP中文网

优先选用语义正确、可访问、零js的实现筛选面板；仅当需滑动动画或兼容ie11/旧safari时，才用js控制max-height。

html怎么做筛选面板展开_html筛选面板展开折叠方法【小技巧】

直接用 <details></details> + <summary></summary> 就能做出语义正确、可访问、零 JS 的筛选面板，99% 的场景够用；需要动画或兼容旧浏览器时，才考虑 JS 控制 max-height。

为什么优先选 `<details></details>` 而不是自己写 toggle

筛选面板本质是「可选操作」，不是核心流程。原生 <details></details> 天然匹配这个语义：内容默认收起、键盘空格/回车可触发、屏幕阅读器自动播报状态、服务端渲染无水合问题。

常见错误现象包括：aria-expanded 手动维护不同步、折叠后 <input> 仍被提交、Safari 下点击热区过小导致点不中。

<summary></summary> 必须是 <details></details> 的第一个子元素，否则展开逻辑失效
别把必填字段（如搜索关键词）塞进 <details></details> 里，否则用户可能漏填
折叠区域内的表单控件默认仍参与提交——这不是 bug，是预期行为；如需“收起即禁用”，得用 JS 动态设 disabled 或后端忽略空值

`<details></details>` 里怎么放筛选控件

结构干净、语义明确，<label></label> 和 <input> 直接嵌套即可，无需额外 class 或 JS 绑定。

示例：

<details><summary>高级筛选</summary><label>
    创建时间范围：
    <input type="date" name="from"> 至 <input type="date" name="to"></label>
  <label>
    状态：
    <select name="status"><option value="">全部</option>
<option value="active">启用</option>
<option value="inactive">停用</option></select></label>
</details>

注意点：

每个 <input> 都要带 name，否则提交时不会带参数
避免在 <summary></summary> 里放按钮、链接等交互元素，会干扰原生展开逻辑
如果用 open 属性默认展开，记得只对真正需要默认可见的筛选项用，别滥用

想加旋转箭头动画怎么办

<details></details> 默认箭头不能直接做 height 过渡，但可以用 ::before 模拟图标并控制旋转。

Html2md

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

下载

关键 CSS：

summary {
  list-style: none;
  position: relative;
  padding-right: 24px;
  cursor: pointer;
}
summary::before {
  content: "▶";
  position: absolute;
  right: 0;
  transition: transform 0.2s ease;
}
details[open] summary::before {
  transform: rotate(90deg);
}

容易踩的坑：

Safari 对 ::marker 支持差，别依赖它；::before 是更稳妥的选择
不要给 <details></details> 设 height 或 overflow: hidden，会破坏原生行为
如果用了 transform: scaleY() 做动画，记得同时设 visibility: hidden，否则缩放过程中仍占文档流

什么时候必须上 JS 控制 `max-height`

只有两个真实需求值得换方案：需要滑动动画（不是纯显隐），或必须支持 IE11 / 旧版 Safari（2020 年前版本）。

JS 核心逻辑很简单：

const details = document.querySelector('details');
const content = details.querySelector('summary').nextElementSibling;

details.addEventListener('toggle', () => {
  if (details.open) {
    content.style.maxHeight = content.scrollHeight + 'px';
  } else {
    content.style.maxHeight = '0';
  }
});

但要注意：