.toggleClass()
返回: jQuery
.toggleClass( className )
描述：给匹配的元素集合的每个元素上添加一个或多个样式类，或从匹配的元素集合的每个元素上删除一个或多个样式类，取决于样式类是否存在，或者取决于状态参数的值。
加入于: 1.0
.toggleClass( className )- className类型：String针对匹配的集合中的每个元素，要切换的一个或多个样式类名（用空格分隔）。
加入于: 1.3
.toggleClass( className, state )加入于: 1.4
.toggleClass( [state ] )- state类型：Boolean一个布尔值，用来确定是要添加样式类还是删除样式类。
加入于: 1.4
.toggleClass( function [, state ] )这个方法取用一个或更多的类名，作为它的参数。在第一个版本中，如果在元素的匹配的集合中的一个元素已经有那个样式类，则会删除那个样式类；如果一个元素没有那个样式类，则会加上那个样式类。举个例子：我们可以对一个简单的<div>应用.toggleClass()：
<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()，会切换在第一次调用.toggleClass()时该元素上的所有的样式类。同样是自从jQuery 1.4，要切换的类名可以通过传入一个函数来确定。
$( "div.foo" ).toggleClass(function() {
if ( $( this ).parent().is( ".bar" ) ) {
return "happy";
} else {
return "sad";
}
});
这个示例针对<div class="foo">这个元素，如果它们的父元素具有bar样式类的话，就切换happy样式类；否则，它将切换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”样式类，在每个第一次点击和第二次点击时，删除这个样式类。
<!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>
演示结果
为每个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 >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>
演示结果