当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .toggle()用法及代码示例


用法 
.toggle( handler, handler [, handler ] ) => jQuery

版本已弃用：1.8，已删除：1.9

说明：将两个或多个处理程序绑定到匹配的元素，以在交替单击时执行。

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

    • handler
      类型：Function(Event eventObject)
      每次单击元素时执行的函数。
    • handler
      类型：Function(Event eventObject)
      每次单击元素时执行的函数。
    • handler
      类型：Function(Event eventObject)
      单击后要循环通过的其他处理程序。

注意：此方法签名在 jQuery 1.8 中已弃用，并在 jQuery 1.9 中删除。 jQuery 还提供了一个名为.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." );
});

随着元素被反复点击，消息交替出现：

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

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

为方便起见，提供了.toggle() 方法。手动实现相同的行为相对简单，如果 .toggle() 内置的假设证明是有限的，这可能是必要的。例如，如果将 .toggle() 应用于同一元素两次，则不能保证正常工作。由于 .toggle() 在内部使用 click 处理程序来完成其工作，我们必须解除绑定 click 以删除附加到 .toggle() 的行为，因此其他 click 处理程序可能会陷入交火。该实现还在事件上调用.preventDefault()，因此如果在元素上调用了.toggle()，则不会跟踪链接并且不会单击按钮。

例子：

切换表格单元格的样式。 (不推荐。使用 .toggleClass() 代替。)：

$( "td" ).toggle(
  function() {
    $( this ).addClass( "selected" );
  }, function() {
    $( this ).removeClass( "selected" );
  }
);

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .toggle()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。