.toggle()

类别：已淘汰 > 淘汰于1.8 | 事件 > 鼠标事件 | 删除

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

描述：把两个或多个处理函数绑定到匹配的元素，在交替单击时执行它们。

注意：此方法签名在jQuery 1.8中被淘汰了，在jQuery 1.9中被删除了。jQuery还提供了一个动画方法，命名为.toggle()，它切换了元素的可见性。到底是引发动画方法还是事件方法，取决于传入的参数集合。

.toggle()方法为click事件绑定了一个处理函数，所以针对触发click的规则大纲在这里也适用。

例如：考虑以下HTML：

1
2
3
 
<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处理函数可能在这种交叉引发中被捕获。实现装置还在事件上调用了.preventDefault()，从而不会打开链接，并且如果在元素上调用.toggle()，则按钮不会被点击。

示例：

切换表单元格的样式。（不建议这么用。请用.toggleClass()代替）：

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