用classlist切换显隐的核心是增删css类而非直接操作style.display，需预先定义.hidden{display:none}等类，用toggle()一键切换，add()/remove()显式控制，避免与内联样式混用。
用 classList 切换显示/隐藏，核心是通过增删 CSS 类来控制样式，而不是直接操作 style.display。这样更符合关注点分离原则，也便于复用和维护。
确保有对应的 CSS 类定义
先在 CSS 中定义好显隐类，比如：
.hidden { display: none; }
.show { display: block; } /* 或 inline、flex 等，按需设置 */
注意：display 的值要匹配元素原本的显示类型（如 <div> 用 <code>block，<span></span> 用 inline），否则可能破坏布局。
用 toggle() 实现一键切换
最常用、最简洁的方式：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
-
element.classList.toggle('hidden')—— 有则删，无则加 - 适合“点击显示/隐藏”这类交互，无需判断当前状态
- 示例：
document.getElementById('menu').classList.toggle('hidden');
用 add() 和 remove() 显式控制
当你需要明确指定显隐逻辑时使用：
- 显示元素：
element.classList.remove('hidden'); - 隐藏元素：
element.classList.add('hidden'); - 可配合条件判断，例如：
if (isActive) el.classList.add('hidden');
避免常见误区
不要混用 classList 和内联样式：
- ❌ 错误：先用
el.style.display = 'none'，再用classList.toggle—— 内联样式优先级更高，CSS 类会被忽略 - ✅ 正确：统一用类控制，移除所有相关内联
display设置 - ⚠️ 注意：
hidden是 HTML 原生布尔属性，别和class="hidden"混淆；二者行为不同（hidden属性等价于display:none且不可被 CSS 覆盖）
