在前端交互开发中，单按钮控制元素显示隐藏是非常常见的需求，比如折叠面板、下拉菜单等场景都需要用到这类功能。传统的实现方式需要先获取元素的当前显示状态，再手动添加或移除对应的CSS类，逻辑步骤较多。而使用原生DOM提供的classList.toggle()方法，可以用更简洁的代码完成同样的效果。
classList.toggle()基本语法
classList是DOM元素的一个只读属性，返回一个元素的类属性集合，其中包含了一系列操作类名的方法，toggle就是其中之一。toggle方法的作用是切换元素的指定类名：如果元素已经存在该类名，就将其移除；如果不存在该类名，就将其添加。
基本语法如下：
// 切换元素的指定类名 element.classList.toggle(className); // 带强制参数的切换，force为true时强制添加，为false时强制移除 element.classList.toggle(className, force);
实现单按钮切换显示隐藏的步骤
1. 准备HTML结构
首先需要准备一个触发按钮和一个需要控制显示隐藏的目标元素，结构如下：
<button id="toggleBtn">点击切换显示/隐藏</button> <div id="targetBox" class="hidden"> 这是需要切换显示隐藏的内容区域 </div>
2. 编写CSS样式
通过CSS定义隐藏状态的样式，这里使用display:none来隐藏元素，也可以根据需求换成visibility:hidden或者opacity:0等属性：
/* 隐藏状态的样式 */
.hidden {
display: none;
}
3. 编写JavaScript逻辑
给按钮绑定点击事件，在事件处理函数中调用目标元素的classList.toggle方法，切换hidden类名即可：
// 获取按钮和目标元素
const toggleBtn = document.getElementById('toggleBtn');
const targetBox = document.getElementById('targetBox');
// 绑定点击事件
toggleBtn.addEventListener('click', function() {
// 切换targetBox的hidden类名
targetBox.classList.toggle('hidden');
});
toggle方法的进阶用法
toggle方法还支持第二个参数force，用于强制指定类名的添加或移除行为，不需要再额外做状态判断：
// 强制添加hidden类，无论元素之前是否有该类
targetBox.classList.toggle('hidden', true);
// 强制移除hidden类，无论元素之前是否有该类
targetBox.classList.toggle('hidden', false);
注意事项
- classList.toggle是原生方法，兼容IE10及以上版本的浏览器，如果需要兼容更低版本浏览器，需要做额外的polyfill处理。
- 切换的类名需要和CSS中定义的类名完全一致，包括大小写，否则无法正确匹配样式。
- 如果目标元素初始没有设置hidden类，第一次点击时会添加该类，实现隐藏效果，符合大多数场景的默认逻辑。
使用classList.toggle()实现单按钮切换显示隐藏，相比传统的if判断修改style属性或者className的方式，代码更简洁，逻辑更清晰，是前端开发中推荐的实现方式。
classList.toggleJavaScriptDOM操作元素显示隐藏修改时间：2026-07-24 04:06:18