必须在事件回调第一行写 e.preventDefault() 阻止表单默认提交，避免页面刷新丢失 JS 状态；推荐用 data-target 关联元素，配合 visibility/opacity 或 max-height 实现平滑过渡；select 切换时需清空无关字段值并动态控制 required 属性。
为什么 submit 按钮一点击表格就闪一下就消失
根本不是 JS 逻辑写错了，而是 <button type="submit"></button> 或表单内按钮触发了默认提交行为，页面刷新导致所有动态状态重置。哪怕你用 classList.toggle() 切换了类，DOM 一刷新，.hidden 类还在，但 JS 状态全丢了。
- 必须在事件回调第一行写
e.preventDefault()，否则白忙活 - 别用
onclick="xxx()"内联写法——拿不到e对象，无法阻止默认行为 - 如果真要提交表单，切换完再手动调用
form.submit()，但得确保目标元素已渲染（通常没问题）
用 data-target 关联按钮和高级选项区块最稳
硬靠 DOM 层级找兄弟、父节点（比如 nextElementSibling 或 closest(".section")）极易崩：中间加个提示文案、换行 <div>，JS 就找不到目标了。
<ul><li>给按钮加 <code>data-target="#advanced-options"，给目标 <div id="advanced-options"> 加初始 <code>class="hidden"
.advanced-section，再按 document.querySelector(btn.dataset.target) 精准显示一个data-target 值，不碰 JS 主干display: none 和 visibility: hidden 的选择陷阱
想加淡入淡出？别直接上 opacity + transition 配 display: none ——display 属性本身不能过渡，动画会卡顿或失效。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 要平滑过渡：用
visibility: hidden+opacity: 0控制显隐，再配transition: opacity 0.2s - 但注意：
visibility: hidden仍占文档流位置，如果下方内容要“上浮”，就得额外处理 margin/padding - 更稳妥的方案是用
max-height+overflow: hidden过渡高度，兼顾布局收放和动画
表单字段联动时，select change 后要清空无关输入框
高级选项常依赖前置选择（如选“自定义时间”才显示时间输入框），但用户切回“标准时间”后，那些已填的时间值还留在 DOM 里，可能被意外提交。
立即学习“前端免费学习笔记（深入）”；
- 在
select的change事件里，先classList.toggle()控制显隐，再遍历目标区块内所有input、textarea，设.value = "" - 如果字段有必填校验，记得同步移除
required属性，否则隐藏后仍会报错 - 不要用
removeAttribute("required")后又忘加回来——推荐用toggleAttribute("required", shouldRequire)
