jQuery的属性与样式之切换样式

最新推荐文章于 2021-08-04 09:34:00 发布

原创最新推荐文章于 2021-08-04 09:34:00 发布 · 255 阅读

1 ·

CC 4.0 BY-SA版权

MVC 专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了jQuery中toggleClass方法的使用技巧，此方法允许在匹配的元素上动态地添加或删除一个或多个样式类，实现样式切换效果。文章涵盖了toggleClass的各种参数用法，包括切换单一类名、带有布尔值开关的类名切换以及通过函数返回类名进行切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做某些效果的时候，可能会针对同一节点的某一个样式不断的切换时会有隔行换色的效果，但jQuery提供一个toggleClass方法用于简化这种互斥的逻辑，通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass（也就是删除样式）

.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

    .toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
    .toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
    .toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值
    .toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数
    注意事项：
    toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加
    toggleClass会保留原有的Class名后新增，通过空格隔开