概览
classList.toggle() 用于在元素上添加或移除某个 class，非常适合“展开/折叠”“开关态”这类交互场景。

基本用法

1
2
const panel = document.querySelector('.panel')
panel.classList.toggle('is-open')

如果 is-open 不存在就添加，存在则移除。

强制设置（第二个参数）

toggle 支持一个可选的布尔值参数，用于强制添加或移除：

1
2
3
4
5
6
7
const panel = document.querySelector('.panel')

// 强制添加
panel.classList.toggle('is-open', true)

// 强制移除
panel.classList.toggle('is-open', false)

常见场景：按钮开关

1
2
<button id="btn">切换</button>
<div id="panel" class="panel">内容</div>
1
2
3
4
5
6
const btn = document.querySelector('#btn')
const panel = document.querySelector('#panel')

btn.addEventListener('click', () => {
	panel.classList.toggle('is-open')
})
1
2
.panel { display: none; }
.panel.is-open { display: block; }

注意事项

  • classList.toggle() 返回布尔值：true 表示添加成功，false 表示移除成功。
  • classList 只处理类名，不会影响其它属性。
  • 同一交互建议统一使用 class 控制样式，避免直接改 style。