# .toggle()

所属分类：事件 > 鼠标事件 | 弃用 > 1.8 版本弃用的 API | 已删除的函数 英文文档：.toggle()

## .toggle( handler(eventObject), handler(eventObject) [, handler(eventObject) ] )返回: jQuery version 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：

1 2 3 4 |
    For example, consider the HTML:<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` 处理，就会出现麻烦。在 .`.toggle()` 的实现中，同样调用了 `.preventDefault()`，因此，链接将不会被触发。并且，如果已经调用了元素上的 `.toggle()`事件，那么，按钮的点击事件也不会被触发。

## 例子:

#### Example: 点击列表项，切换它们的高亮效果。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
    <!DOCTYPE html><html><head>  <style>  ul { margin:10px; list-style:inside circle; font-weight:bold; }  li { cursor:pointer; }  </style>  <script src="https://code.jquery.com/jquery-latest.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>

#### Demo:

#### Example: 切换表格的样式：

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