.toggle()


.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject) ] )返回: jQueryversion deprecated: 1.8, removed: 1.9

描述: 绑定两个或多个处理程序绑定到匹配的元素,用来执行在交替的点击。

  • 添加的版本: 1.0.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject) ] )

    • handler(eventObject)
      类型: Function()
      第一数(奇数)次点击时要执行的函数。
    • handler(eventObject)
      类型: Function()
      第二数(偶数)次点击时要执行的函数。
    • handler(eventObject)
      类型: Function()
      更多次点击时要执行的函数。

注意: 这个方法在jQuery 1,8中宣告过时,在jQuery 1.9中已经移除;jQuery animation 也有一个名为.toggle()方法。哪一个被调用取决于传递的参数的设置。

.toggle()方法的处理程序绑定一个click事件,因此,对于 click 事件适用的规则,同样也适用于该事件。

举例来说,请看下面的HTML:

1
2
3
4
For example, consider the HTML:
<div id="target">
Click here
</div>

这个事件处理程序可以绑定到<div>:

1
2
3
4
5
$('#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()被证明是限制的。例如,如果在相同的元素上绑定了两个 .toggle()事件,那么无法保证它们能正确的工作。因为 .toggle() 内部使用了 click 进行处理,所以我们必须先解除 click 事件的绑定,移除 .toggle() 的附属行为。这样的话,其它的 click 处理,就会出现麻烦。在 ..toggle() 的实现中,同样调用了 .preventDefault(),因此,链接将不会被触发。并且,如果已经调用了元素上的 .toggle()事件,那么,按钮的点击事件也不会被触发。

例子:

Example: 点击列表项,切换它们的高亮效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin:10px; list-style:inside circle; font-weight:bold; }
li { cursor:pointer; }
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.2/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>

Demo:

Example: 切换表格的样式:

1
2
3
4
5
6
7
8
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);