最稳妥方案是用 display: none 配合 JavaScript 控制；需匹配原布局显示模式，避免仅清空 style.display，推荐统一状态管理；hidden 属性仅为 CSS 钩子，非强制机制；联动场景须初始化隐藏、用 data 属性解耦；滚动输入类需区间判断与节流。
直接用 display: none 配合 JavaScript 控制是最稳妥、兼容性最好、语义最清晰的方案。其他方式要么留白占位（visibility: hidden），要么依赖新标准（hidden 属性）或服务端逻辑，不适合大多数前端动态场景。
用 style.display 切换显隐最常用
这是绝大多数交互场景的实际做法：初始设为 none，点击/选中/滚动等事件触发后改为 block（或 flex、grid，需匹配原布局模式）。
- 必须确保目标元素有明确的块级显示上下文，比如
div默认可设block，但span设block会改变流式行为 - 不要只写
element.style.display = ""清空样式——这不会恢复 CSS 文件里定义的值，而是回退到浏览器默认（如inline），容易出错 - 推荐统一管理状态：先批量设
none，再按条件单独设回可见值，避免残留显示
hidden 属性和 [hidden] CSS 规则的区别
hidden 是 HTML5 原生布尔属性，浏览器默认对其应用 [hidden] { display: none; }。但它不是“开关式”状态同步机制：
- JS 中用
el.hidden = true或el.setAttribute('hidden', '')都有效，但后者更直观 - 若 CSS 里写了
[hidden] { display: block !important; }，那hidden属性就失效了——它本质只是个钩子，不保证强制隐藏 - 服务端渲染时用
hidden比写内联style更干净，但客户端 JS 动态控制仍建议走style.display
单选/复选/下拉联动时的关键陷阱
这类控件触发显隐，最容易犯的错误是没重置前置状态：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 监听
change而非click——下拉和单选在键盘操作（空格/回车）时也需响应，change更健壮 - 多个关联区域必须统一初始化隐藏，否则第一次选择可能看不到变化（比如默认没设
display: none，JS 只负责显示，不负责隐藏其他） - 用
data-target或data-show-if这类自定义属性绑定关系，比硬编码 ID 字符串更易维护，例如：<input type="radio" name="mode" value="upload" data-target="upload-section">
滚动或输入值触发时别漏掉边界处理
这类基于连续状态（如 window.scrollY、input.value）的显隐，核心是“范围判断”而非“单点触发”：
- 滚动显隐必须用区间（
y >= 200 && y ），不能只写 <code>y > 200——否则向下滚过头后，元素永远不隐藏 - 输入判断要区分空字符串、空白符、
null和undefined，建议统一用!value?.trim() - 频繁触发的场景（如滚动、输入）务必加节流，否则
display切换会卡顿；用requestAnimationFrame包一层比setTimeout更精准
真正难的不是“怎么写”，而是“什么时候该清空状态”。比如用户从下拉选 A 切到 B，A 对应的内容隐藏了，但如果之后又切回 A，得确保它能正确恢复——这要求所有显隐逻辑都可逆且幂等，而不是靠 DOM 当前样式做条件判断。
