返回值:jQuerytoggleClass(className)

根据样式是否存在或根据 switch 参数，为每个匹配的元素添加或移除一个或多个样式。

该方法接受一个或多个参数。对于 toggleClass(className) 方法，如果匹配的元素中含有指定的样式，那么该样式会被移除，否则该样式会被添加到匹配的元素中。例如,我们可以在 <div> 使用 .toggleClass() 方法: 

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

第一次执行 $('div.tumble').toggleClass('bounce') 时,我们可以得到了如下的结果： 

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

第二次执行 The second time we apply $('div.tumble').toggleClass('bounce') 时,<div> 的只返回了一个 tumble 样式: 

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

类似的，我们可以对上面相同的 <div> 执行 .toggleClass('bounce spin') 方法，就可以实现 <div class="tumble bounce spin"> 和 <div class="tumble"> 之间的样式切换。

对于 toggleClass(className, switch) 方法，可以通过第二个参数决定样式是否应该被添加或被移除。如果第二个参数等于 true,那么样式会被添加，如果等于 false,那么样式会被移除。从本质上讲,如下语句: 

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

等价于:

if (addOrRemove) {
    $('#foo').addClass(className);
  }
  else {
    $('#foo').removeClass(className);
  }

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

$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar')) {
    return 'happy';
  } else {
    return 'sad';
  }
});

上面的例子中，如果 <div class="foo"> 的父元素上含有 bar 样式的话，那么会在 <div class="foo"> 元素上追加 happy 样式,使之在 foo happy 样式和 foo 样式之间切换,否则使之在 foo sad 样式和 foo 样式之间切换。

示例:

点击段落时，切换 'highlight' 样式。

<!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="jquery.min.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>

演示:

示例:

在相同的段落上，每点击 3 次会在该段落上追加 "highlight" 样式，第一次和第二次点击时，会移除该样式。

<!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="jquery.min.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>

演示:

示例:

点击按钮时，根据按钮上的样式，切换所有 div 上的样式。

<!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="jquery.min.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>

演示: