jQuery toggleClass() 方法

jQuery HTML/CSS 方法

toggleClass()方法对添加和删除所选元素中的一个或多个类名称之间切换。

此方法检查每个元素的指定类名称:

  • 如果缺少类名,则添加

  • 如果已经设置了类名,则将其删除

但是,通过使用state参数,您可以指定仅删除或仅添加类名称。

语法:

切换类名:

$(selector).toggleClass(className)

使用state参数切换类:

$(selector).toggleClass(className, state)

使用函数切换类:

$(selector).toggleClass(function(index, currentClass), state)

实例

在所有<p>元素的添加和删除“ anotherClass”类名称之间切换:

$("button").click(function(){
  $("p").toggleClass("anotherClass");
});
测试看看‹/›

使用state参数仅添加或删除类名称:

$("button").click(function(){
  $("p").toggleClass("anotherClass", true);
});
测试看看‹/›

参数值

参数描述
className指定要添加/删除的一个或多个(用空格分隔)的类名
state一个布尔值,用于确定是应添加(true)还是应删除该类(false)
function(index, currentClass)函数,该函数返回一个或多个(以空格分隔)的类名,该类名将添加到现有类名中或从现有类名中删除。
  • index-返回元素在集合中的索引位置

  • currentClass-返回所选元素的当前类名称

jQuery HTML/CSS 方法