移动端多条件筛选菜单须弃用，采用触发+或面板结构，内嵌分组、标识、带role="checkbox"的与语义化组合，确保可访问性、触摸响应与滚动流畅。
移动端多条件筛选菜单的核心结构怎么搭
直接用 <select></select> 做多条件筛选在移动端体验极差——iOS 上原生下拉会全屏弹出，Android 行为不一致，且无法支持多选、搜索、联动等常见需求。必须放弃原生表单控件，改用自定义 DOM + 语义化 ARIA 属性构建可访问、可触摸、可滚动的筛选面板。
推荐结构：一个触发按钮（<button></button>） + 一个隐藏的 <dialog></dialog> 或 <div role="dialog">，内部用 <code><fieldset></fieldset> 包裹每组条件（如“价格区间”“品牌”“评分”），每组用 <legend></legend> 标识，选项用带 role="checkbox" 或 type="checkbox" 的 <input> 配合 <label></label>。
关键点：
-
<dialog></dialog>在 Safari 15.4+ 和 Chrome 98+ 支持良好，但旧版需 fallback 到<div> + 手动管理 <code>aria-modal和焦点捕获 - 所有 checkbox 必须有唯一
id，且<label></label>的for属性严格对应，否则 iOS VoiceOver 点击无效 - 避免在筛选面板内使用
position: fixed滚动时卡顿，改用position: absolute+transform: translateZ(0)触发硬件加速 - 每个条件项的
<input type="checkbox">绑定change事件，而非click（防止 iOS 上 label 点击不触发） - 维护一个 JS 对象（如
filters = { brand: ['apple', 'huawei'], price: [1000, 5000] }），每次变更后调用renderActiveTags()更新顶部标签栏 - 标签栏里的每个
<span class="tag"></span>要带data-filter-key和data-filter-value，点击即从对象中删除对应项并重置 checkbox 的checked属性 - 不要用
innerHTML重建整个标签栏，用document.createElement+appendChild增量更新，避免滚动位置丢失 - 确保
<label></label>内没有嵌套块级元素（如<div>），Safari 会忽略其点击区域；只允许内联内容（文字、<code><span></span>） - 给
<input type="checkbox">显式设置width: 1px; height: 1px; opacity: 0; position: absolute;，再用<label></label>的::before伪元素画勾选框，避免 Safari 对隐藏 input 的事件拦截 - 如果筛选面板用
transform: translateY()动画入场，务必加will-change: transform，否则 iOS WebKit 可能丢弃 touch 事件 - 禁用
-webkit-tap-highlight-color: transparent后，记得补上outline: none并用:focus-visible提供键盘焦点样式，否则无障碍测试失败 - 每次筛选变更后，调用
URLSearchParams构建参数字符串，例如brand=apple&brand=huawei&price_min=1000&price_max=5000 - 用
history.replaceState()更新 URL，不触发页面跳转；监听popstate事件，在页面加载或返回时解析参数并还原 UI 状态 - 注意：URL 参数名不要用
filter[brand]这类 PHP 风格，Safari 对方括号编码支持不稳定；统一用brand、brand2或重复键名（brand=apple&brand=huawei） - 服务端渲染页面时，如果 SSR 框架（如 Next.js）支持，应在
getServerSideProps或类似钩子中提前读取 query，避免客户端闪屏
如何让筛选项支持多选 + 实时反馈
用户点选“苹果”“华为”“小米”，界面上要立刻显示已选标签，同时不影响其他条件操作。不能等点“确定”才更新状态——移动端误触率高，实时反馈是基本体验底线。
立即学习“前端免费学习笔记（深入）”；
实操建议：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
为什么 iOS 上点击筛选项没反应？常见兼容性坑
最典型现象：安卓一切正常，iOS 点击 checkbox 无响应，或点了没视觉变化。根本原因不是 JS 错误，而是 Safari 对 label + input 的触摸事件处理异常，尤其当父容器有 overflow: hidden 或 transform 时。
必须检查这几处：
筛选结果如何与 URL 同步（支持分享和刷新保留）
用户筛选完想发链接给朋友，或者刷新页面后不希望回到初始状态。靠 localStorage 容易不同设备/浏览器不一致，必须用 URL 参数。
做法很简单，但细节决定成败：
最常被忽略的是「清空筛选」操作：点击「重置」不仅要清空 JS 状态和 UI，还必须把所有筛选参数从 URL 中移除，并用 replaceState 写回干净路径，否则用户分享出去的链接仍带过期参数。
