.toggle()

类别: 已弃用 > 已弃用 1.8 | 事件 > 鼠标事件 | 已移除

.toggle( handler, handler [, handler ] )返回值: jQuery版本弃用: 1.8, 已移除: 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." );
});

当元素被反复点击时，消息会交替显示

.toggle() 的第一个处理程序被调用。
.toggle() 的第二个处理程序被调用。
.toggle() 的第一个处理程序被调用。
.toggle() 的第二个处理程序被调用。
.toggle() 的第一个处理程序被调用。

如果提供了两个以上的处理程序，.toggle() 将在所有处理程序之间循环。例如，如果有三个处理程序，那么第一个处理程序将在第一次点击、第四次点击、第七次点击等时被调用。

.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" );
  }
);