返回值:jQuerytoggle(handler(eventObject), handler(eventObject), [handler(eventObject)])
为匹配的元素绑定两个或多个事件,用于点击事件时切换使用。
-
1.0 新增toggle(handler(eventObject), handler(eventObject), [handler(eventObject)])
handler(eventObject) (Function) 偶数次点击时,执行的函数。handler(eventObject) (Function) 奇数次点击时,执行的函数。handler(eventObject) (Function) 可选参数,可选函数,参与循环点击的,用于上述循环点击外执行的函数。
注意: jQuery 同样提供的一个动画方法,也叫 .toggle()。动画的 .toggle() 应用于元素的可见性。究竟哪一个方法会被执行,取决于传递的参数设置。
.toggle()
方法绑定方法用于 click
事件,因此,对于 click
事件适用的规则,同样也适用于该事件。
举例来说,请看下面的HTML: <div id="target"> Click here </div>
可以将事件绑定在 <div>
上:
$('#target').toggle(function() { alert('First handler for .toggle() called.'); }, function() { alert('Second handler for .toggle() called.'); });
当反复在元素上点击时,会轮流显示以下信息:
First handler for .toggle() called.
Second handler for .toggle() called.
First handler for .toggle() called.
Second handler for .toggle() called.
First handler for .toggle() called.
如果提供的函数多于两个,.toggle()
也将会循环这些事件。例如,如果提供了三个函数,那么第一个事件会在第一次,第四次,第七次这样的点击次数时被调用
之所以要有 .toggle()
方法,主要是出于使用方便的角度。它采用相对简单的实现,完成了需要人工实现的同样行为。如果内置的 .toggle()
的假设被证明是受限的,那么这可能是必要的。(原文如下:It is relatively straightforward to implement the same behavior by hand, and this can be necessary
if the assumptions built into .toggle()
prove limiting.)例如,如果在相同的元素上绑定了两个 .toggle()
事件,那么无法保证它们能正确的工作。因为 .toggle()
内部使用了 click
进行处理,所以我们必须先解除 click
事件的绑定,移除 .toggle()
的附属行为。这样的话,其它的 click
处理,就会出现麻烦。在 .toggle()
的实现中,同样调用了 .preventDefault()
,因此,链接将不会被触发。并且,如果已经调用了元素上的 .toggle()
事件,那么,按钮的点击事件也不会被触发。
示例:
点击列表项,切换它们的高亮效果。
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin:10px; list-style:inside circle; font-weight:bold; }
li { cursor:pointer; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<ul>
<li>Go to the store</li>
<li>Pick up dinner</li>
<li>Debug crash</li>
<li>Take a jog</li>
</ul>
<script>
$("li").toggle(
function () {
$(this).css({"list-style-type":"disc", "color":"blue"});
},
function () {
$(this).css({"list-style-type":"disc", "color":"red"});
},
function () {
$(this).css({"list-style-type":"", "color":""});
}
);
</script>
</body>
</html>
演示:
示例:
切换表格的样式:
jQuery 代码:
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);