.toggleClass()

所属分类：Attributes | Manipulation > Class Attribute | CSS 英文文档：.toggleClass()

.toggleClass( className )返回: jQuery

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

  • 添加的版本: 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 class="tumble">Some text.</div>

第一次我们应用 $('div.tumble').toggleClass('bounce'), 我们可以得到以下内容:

1
 
<div class="tumble bounce">Some text.</div>

第二次我能同样应用 $('div.tumble').toggleClass('bounce'), 这个 <div> 样式类回归到单独的 tumble 值：

1
 
<div class="tumble">Some text.</div>

应用 .toggleClass('bounce spin')在同一个 <div> 上，结果会在 <div class="tumble bounce spin"> 和 <div class="tumble">之间交替切换。

.toggleClass()的第二个版本使用第二个参数判断样式类是否应该被添加或删除。如果这个参数的值是true，那么这个样式类将被添加;如果这个参数的值是false，那么这个样式类将被移除。本质上是这样的:

1
 
$('#foo').toggleClass(className, addOrRemove);

等价于:

1
2
3
4
5
6
 
if (addOrRemove) {
    $('#foo').addClass(className);
  }
  else {
    $('#foo').removeClass(className);
  }

从 jQuery 1.4 开始, 如果不将任何参数传递给 .toggleClass() 方法,那么匹配元素上的所有样式会在该方法第一次执行时被移除，第二次执行时被还原，如此往复。同样的，从 jQuery 1.4 开始,可以用一个函数作为参数，返回应该显示的样式：

1
2
3
4
5
6
7
 
$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar')) {
    return 'happy';
  } else {
    return 'sad';
  }
});

如果匹配元素的父级元素有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
 
<!DOCTYPE html>
<html>
<head>
  <style>
 
  p { margin: 4px; font-size:16px; font-weight:bolder;
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:yellow; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p class="blue">Click to toggle</p>
  <p class="blue highlight">highlight</p>
  <p class="blue">on these</p>
  <p class="blue">paragraphs</p>
<script>
    $("p").click(function () {
      $(this).toggleClass("highlight");
    });
</script>
 
</body>
</html>

Demo:

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
 
<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin: 4px; font-size:16px; font-weight:bolder;
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:red; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
  <p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
  <p class="blue">on these (<span>clicks: 0</span>)</p>
 
  <p class="blue">paragraphs (<span>clicks: 0</span>)</p>
<script>
var count = 0;
$("p").each(function() {
  var $thisParagraph = $(this);
  var count = 0;
  $thisParagraph.click(function() {
    count++;
    $thisParagraph.find("span").text('clicks: ' + count);
    $thisParagraph.toggleClass("highlight", count % 3 == 0);
  });
});
 
</script>
 
</body>
</html>

Demo:

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
 
<!DOCTYPE html>
<html>
<head>
  <style>
.wrap > div { float: left; width: 100px; margin: 1em 1em 0 0;
              padding=left: 3px; border: 1px solid #abc; }
div.a { background-color: aqua; }
div.b { background-color: burlywood; }
div.c { background-color: cornsilk; }
</style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<div class="buttons">
  <button>toggle</button>
  <button class="a">toggle a</button>
  <button class="a b">toggle a b</button>
  <button class="a b c">toggle a b c</button>
  <a href="#">reset</a>
</div>
<div class="wrap">
  <div></div>
  <div class="b"></div>
  <div class="a b"></div>
  <div class="a c"></div>
</div>
 
<script>
var cls = ['', 'a', 'a b', 'a b c'];
var divs = $('div.wrap').children();
var appendClass = function() {
  divs.append(function() {
    return '<div>' + (this.className || 'none') + '</div>';
  });
};
 
appendClass();
 
$('button').bind('click', function() {
  var tc = this.className || undefined;
  divs.toggleClass(tc);
  appendClass();
});
 
$('a').bind('click', function(event) {
  event.preventDefault();
  divs.empty().each(function(i) {
    this.className = cls[i];
  });
  appendClass();
});
</script>
 
</body>
</html>

Demo: