概述 .toggleClass( className )
返回值：jQuery
描述：为匹配的元素集合中的每个元素上添加或删除一个或多个样式类（class）,取决于这个样式类（class）是否存在或state参数的值。（手册网注：如果存在（不存在）就删除（添加）一个类。）
String
String
在jQuery 1.12/2.2 版本之前，
.toggleClass()方法操纵是选定元素的className特性（property），不是class属性（attribute）。一旦特性（property）改变，浏览器就会更新相应地的属性（attribute）。此行为的一个言外之意是，这种方法只适用于HTML DOM语义的文档（例如，不是纯XML文档）。
在jQuery1.12/2.2中，改变了这种行为以改善对XML文档，包括SVG的支持。从这个版本开始，
class 属性（attribute）被替换（手册网注：这个版本开始，.addClass()方法操作的是class 属性（attribute），而不是className特性（property））。因此，..toggleClass()可以在XML或SVG文档中使用。
这个该方法可以接受一个或多个样式类名称作为他的参数。在第一个版本中，如果在匹配的元素集合中的每个元素上存在该样式类就会被移除；如果某个元素没有这个样式类就会加上这个样式类。举个示例： 我们可以应用 .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 );
is equivalent to:
if ( addOrRemove ) {
$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
}
As of jQuery 1.4, if no arguments are passed to .toggleClass(), all class names on the element the first time .toggleClass() is called will be toggled. Also as of jQuery 1.4, the class name to be toggled can be determined by passing in a function.
从 jQuery 1.4 开始, 如果不将任何参数传递给 .toggleClass() 方法,那么匹配元素上的所有样式会在该方法第一次执行时被移除，第二次执行时被还原，如此往复。同样的，从 jQuery 1.4 开始,可以用一个函数作为参数，返回应该显示的样式：
$( "div.foo" ).toggleClass(function() {
if ( $( this ).parent().is( ".bar" ) ) {
return "happy";
} else {
return "sad";
}
});
如果匹配元素的父级元素有bar样式类名，这个示例将为<div class="foo">元素切换 happy 样式类； 否则他将切换 sad 样式类 。
示例
为匹配的元素切换 'selected' 类
$("p").toggleClass("selected");每点击三下加上一次 'highlight' 类
<strong>jQuery 代码:</strong> var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});根据父元素来设置class属性
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
当点击段落的是有切换 'highlight' 样式类
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<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-1.10.2.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>
运行一下
每当第三次点击段落的时候添加 "highlight" 样式类, 第一次和第二次点击的时候移除 "highlight" 样式类
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<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-1.10.2.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>
运行一下
Toggle the class name(s) indicated on the buttons for each div.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<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-1.10.2.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" ).on( "click", function() {
var tc = this.className || undefined;
divs.toggleClass( tc );
appendClass();
});
$( "a" ).on( "click", function( event ) {
event.preventDefault();
divs.empty().each(function( i ) {
this.className = cls[ i ];
});
appendClass();
});
</script>
</body>
</html>
运行一下
概述 .toggleClass( [state ] )过时版本: 3.0
返回值：jQuery
实例