.toggle()

Categories: 已废弃 > 已废弃 1.8 | 事件 > 鼠标事件 | 已移除

.toggle( handler, handler [, handler ] )Returns: jQueryversion deprecated: 1.8, removed: 1.9

Description: 将两个或多个处理程序绑定到匹配的元素，在交替点击时执行。

注意：此方法签名在 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() 内部使用 click 处理程序来完成其工作，我们必须解绑 click 以移除附加了 .toggle() 的行为，因此其他 click 处理程序可能会受到影响。该实现还会对事件调用 .preventDefault()，因此如果对元素调用了 .toggle()，链接将不会被跟踪，按钮将不会被点击。

示例

切换表格单元格的样式。（不推荐。请改用 .toggleClass()。）

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