jquery toggleClass()的用法

toggleClass(class)

说明:如果存在（不存在）就删除（添加）一个类。

如果匹配元素集合中元素没有使用样式‘class’则对该元素加入样式‘class’；如果已经使用该样式，则从该元素中删除该样式。

view source

print?

1	$("div").toggleClass("highlight");

点击div元素后，如果匹配div元素集合中包含样式‘highlight’则删除该样式，没有包含‘highlight’样式则增加该样式

下面是jQuery1.2.6中toggleClass的源码：

view source

print?

01	function (value, stateVal) {

02	var type = typeof value,

03	isBool = typeof stateVal === "boolean";

04	if (jQuery.isFunction(value)) {

05	return this.each(function (i) {

06	var self = jQuery(this);

07	self.toggleClass(value.call(this, i, self.attr("class"), stateVal), stateVal);

08

});

09

}

10	return this.each(function () {

11	if (type === "string") {

12	var className, i = 0,

13	self = jQuery(this),

14	state = stateVal,

15	classNames = value.split(rspace);

16	while ((className = classNames[i++])) {

17	state = isBool ? state : !self.hasClass(className);

18	self[state ? "addClass" : "removeClass"](className);

19

}

20	} else if (type === "undefined" || type === "boolean") {

21	if (this.className) {

22	jQuery.data(this, "__className__", this.className);

23

}

24	this.className = this.className || value === false ? "" : jQuery.data(this, "__className__") || "";

25

}

26

});

27

}

toggleClass( class, switch )

如果开关switch参数为true则加上对应的class，否则就删除。

返回值：jQuery

参数：

class(String) :要切换的css类名。

switch(Boolean) :用于决定是否切换class的布尔值。

当switch是true时添加类，当switch是false时删除类



我们来看下这个switch的使用方法

每点击三下加上一次 'selected' 类：

jQuery 代码:

view source

print?

1	var count = 0;

2	$("p").click(function(){

3	$(this).toggleClass("highlight", count++ % 3 == 0);

4

});

原来是传入一个表达式来决定是否切换class，因为toggleclass默认是来回切换的,在上面的列子就实现了点击三下才切换class

jquery1.3.2以上的版本toggleClass也可以和addClass一样，用空格分隔多个class名称了

view source

print?

1	.toggleClass(“a b”) ==  .toggleClass(“a”).toggleClass(“b”)

无参数时，自动删除、恢复全部class，也可以传递一个布尔值，true为恢复class，false为删除class 也可以第一个参数为class名，第二个参数为布尔值，具体用法如下:

view source

print?

01

/ 原始代码

02	// <div class=”a b c”></div>

03	// 删除、恢复全部class

04	$(‘div’).toggleClass();        // <div class=”" />

05	$(‘div’).toggleClass();        // <div class=”a b c” />

06	$(‘div’).toggleClass( false ); // <div class=”" />

07	$(‘div’).toggleClass( true );  // <div class=”a b c” />

08	// 删除、恢复多个 class

09	$(‘div’).toggleClass( “a b” );          // <div class=”c” />

10	$(‘div’).toggleClass( “a c” );          // <div class=”a” />

11	$(‘div’).toggleClass( “a b c”, false ); // <div class=”" />

12	$(‘div’).toggleClass( “a b c”, true );  // <div class=”a b c” />

jQuery1.4.2版本还可以传入当前值作为设置函数的第二个参数，供设置函数使用

.toggleClass( function(index, class), [ switch ] )

view source

print?

1	$('div.foo').toggleclass(function() {

2	if ($(this).parent().is('.bar') {

3	return 'happy';

4

} else {

5	return 'sad';

6

}

7

});

jQuery1.4中的toggleClass可以传入一个函数了,功能更加的强大