应优先使用 classList.toggle() 切换预定义 CSS 类（如 .hidden），而非直接操作 style.display；因后者会破坏原始布局、无法读取 CSS 规则设置的 display 值，且与动画、响应式、SSR 冲突。
直接用 classList.toggle() 切换预定义 CSS 类是最稳、最易维护的做法，别一上来就动 style.display。
为什么不要直接改 style.display
手动判断 element.style.display === 'none' 并赋值 'block' 或 'none' 看似简单，但实际埋了几个坑：
- 元素原本可能是
flex、grid或inline-block，硬设'block'会破坏布局 -
style.display只读取内联样式，如果 display 是由 CSS 规则（比如 .card { display: flex }）控制的，这里永远读不到真实值 - 后续加动画、响应式或 SSR 渲染时，这种写法容易和 CSS 冲突，调试成本陡增
classList.toggle() 的正确用法
核心是把“隐藏”这个语义抽成一个类，让 JS 只管切换，CSS 管表现：
- CSS 中定义
.hidden { display: none; }，其他样式（如过渡、可访问性）也集中在这里 - HTML 元素初始带这个类：
<div id="details" class="hidden">...</div> - JS 绑定事件时只写一行：
document.getElementById('toggle-btn').addEventListener('click', () => { document.getElementById('details').classList.toggle('hidden'); }); - 不需要 if/else 判断状态——
toggle()自动处理“有就删、无就加”
需要淡入淡出动画时怎么处理
display: none 无法触发 CSS transition，所以不能直接对它加 transition: display 0.3s。可行组合是：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 用
opacity+visibility：先设visibility: hidden; opacity: 0;，再加transition: opacity 0.3s, visibility 0.3s；注意visibility的过渡是“阶跃式”，需配合transition-delay控制时序 - 用
max-height技巧：对内容块设max-height: 0; overflow: hidden;和transition: max-height 0.3s ease-out;，展开时设一个足够大的max-height值（比如500px），适合已知高度范围的内容 - 若必须用
display，动画只能分两步：先触发动画（如 opacity），再在transitionend回调里切display，否则动画会跳
多个切换项共用一套逻辑的注意事项
当页面有多个“展开/收起”按钮时，别给每个都写独立事件监听器。更可靠的方式是用属性关联：
- 按钮加
data-target="#faq-1"，目标 div 的 id 对应上 - JS 用事件委托绑定到父容器：
container.addEventListener('click', e => { if (e.target.matches('[data-target]')) { const target = document.querySelector(e.target.dataset.target); target.classList.toggle('hidden'); } }); - 避免依赖 DOM 顺序（比如
nextElementSibling），结构一变就失效 - ID 必须唯一且拼写严格一致——
faq-1和#faq-1不匹配，FAQ-1大小写错也不行
真正麻烦的不是切换本身，而是状态同步：比如用户点了展开，又刷新了页面，或者从链接直接进到某个展开状态，这时候得结合 URL hash、sessionStorage 或组件状态管理来保持一致性，纯靠 classList.toggle() 是不够的。
