描述: 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类。
-
添加的版本: 1.0.toggleClass( className )
-
className类型: String在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名。
-
-
添加的版本: 1.3.toggleClass( className, switch )
-
className类型: String在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名。
-
switch类型: Boolean一个布尔值,用于判断样式是否应该被添加或移除。
-
-
添加的版本: 1.4.toggleClass( [switch ] )
-
switch类型: Boolean一个用来判断样式类添加还是移除的 布尔值。
-
-
添加的版本: 1.4.toggleClass( function(index, class, switch) [, switch ] )
-
function(index, class, switch)类型: Function()用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。
-
switch类型: Boolean一个用来判断样式类添加还是移除的 布尔值。
-
这个该方法可以接受一个或多个样式类名称作为他的参数。在第一个版本中,如果在匹配的元素集合中的每个元素上存在该样式类就会被移除;如果某个元素没有这个样式类就会加上这个样式类。举个例子: 我们可以应用 .toggleClass()
在简单的 <div>
上:
1
|
|
第一次我们应用 $('div.tumble').toggleClass('bounce')
, 我们可以得到以下内容:
1
|
|
第二次我能同样应用 $('div.tumble').toggleClass('bounce')
, 这个 <div>
样式类回归到单独的 tumble
值:
1
|
|
应用 .toggleClass('bounce spin')
在同一个 <div>
上,结果会在 <div class="tumble bounce spin">
和 <div class="tumble">
之间交替切换。
.toggleClass()
的第二个版本使用第二个参数判断样式类是否应该被添加或删除。如果这个参数的值是true
,那么这个样式类将被添加;如果这个参数的值是false
,那么这个样式类将被移除。本质上是这样的:
1
|
|
等价于:
1
2
3
4
5
6
|
|
从 jQuery 1.4 开始, 如果不将任何参数传递给 .toggleClass()
方法,那么匹配元素上的所有样式会在该方法第一次执行时被移除,第二次执行时被还原,如此往复。同样的,从 jQuery 1.4 开始,可以用一个函数作为参数,返回应该显示的样式:
1
2
3
4
5
6
7
|
|
如果匹配元素的父级元素有bar
样式类名,这个例子将为<div class="foo">
元素切换 happy
样式类; 否则他将切换 sad
样式类 。
例子:
Example: 当点击段落的是有切换 ‘highlight’ 样式类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
|
Example: 每当第三次点击段落的时候添加 “highlight” 样式类, 第一次和第二次点击的时候移除 “highlight” 样式类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
|
Example: Toggle the class name(s) indicated on the buttons for each div.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
|