.toggle()

发布于 2017-09-11 17:16:37 字数 3425 浏览 1086 评论 0 收藏 0

所属分类：事件 > 鼠标事件 | 弃用 > 1.8 版本弃用的 API | 已删除的函数

.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：

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

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

$('#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: 点击列表项，切换它们的高亮效果。

<!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>

Example: 切换表格的样式：

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据