.toggleClass()
.toggleClass( className ) 官网原E文： jQuery
描述： 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或价值切换属性。即：如果存在（不存在）就删除（添加）一个类。
-
version added: 1.0.toggleClass( className )
className在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名。
-
version added: 1.3.toggleClass( className, switch )
className在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名。
switch一个用来判断样式类添加还是移除的 boolean 值。
-
version added: 1.4.toggleClass( function(index, class), [ switch ] )
function(index, class)用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。
switch一个用来判断样式类添加还是移除的 boolean 值。
这个该方法以一个或多个样式类名称作为他的参数。在第一个版本中，如果在匹配的元素集合中的每个元素上存在该样式类就会被移除；如果某个元素没有这个样式类就会加上这个样式类。举个例子： 我们可以应用 .toggleClass() 在简单的 <div>上：
<div class="tumble">Some text.</div>
第一次我们应用 $('div.tumble').toggleClass('bounce'), 我们可以得到以下内容:
<div class="tumble bounce">Some text.</div>
第二次我能同样应用 $('div.tumble').toggleClass('bounce'), 这个 <div> 样式类回归到单独的 tumble 值：
<div class="tumble">Some text.</div>
应用 .toggleClass('bounce spin')在同一个 <div> 上，结果会在 <div class="tumble bounce spin"> 和 <div class="tumble">之间交替。
.toggleClass()的第二个版本使用第二个参数判断样式类是否应该被添加或删除。如果这个参数的值是true，那么这个样式类将被添加;如果这个参数的值是false，那么这个样式类将被移除。本质上是这样的:
$('#foo').toggleClass(className, addOrRemove);
等价于:
if (addOrRemove) {
$('#foo').addClass(className);
}
else {
$('#foo').removeClass(className);
}
在 jQuery 1.4 中, .toggleClass()方法允许我们通过函数来传递切换的样式类名。
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar')) {
return 'happy';
} else {
return 'sad';
}
});
如果匹配元素的父级元素有bar样式类名，这个例子将为<div class="foo">元素切换 happy 样式类； 否则他将切换 sad 样式类 。
举例：
例子： 当点击段落的是有切换 '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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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>Demo:
例子： 每当第三次点击段落的时候添加 "highlight" 样式类, 第一次和第二次点击的时候移除 "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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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>