jQuery | 带示例的 toggleClass()

简介

toggleClass() 方法在 jQuery 中是用来在元素上切换一个或多个类的方法。它允许您添加/删除指定的类，或者根据元素是否已经具有该类来决定添加或删除类。

语法

$(selector).toggleClass(classname, switch);

参数说明：

• classname：要切换的一个或多个类名，多个类名可以用空格分隔。
• switch：（可选）一个布尔值，用于切换类名。如果为 true，则添加指定类，如果为 false，则删除指定类。

示例

<!-- HTML 代码 -->
<button>点击切换</button>
<div class="box">测试元素</div>

// JavaScript 代码
$("button").click(function(){
  $(".box").toggleClass("red");
});

/* CSS 代码 */
.red {
  color: red;
}

在上面的示例中，当 button 按钮被点击时，元素 div.box 上的 red 类将被切换。如果 div.box 元素原来没有 red 类，那么 red 类将被添加到元素上。如果 div.box 已经存在 red 类，那么 red 类将从元素上删除。

注意事项

• toggleClass() 方法会添加或删除指定的类，同时也会在添加和删除类之间切换。
• 如果选择器选中多个元素，toggleClass() 方法将在每个元素上执行该操作。
• toggleClass() 方法在切换类时，不会影响元素上已经存在的其他类。