.toggle( handler(eventObject), handler(eventObject), [ handler(eventObject) ] ) 官网原E文: jQuery

描述: 绑定两个或多个处理程序绑定到匹配的元素,用来执行在交替的点击。

  • version added: 1.0.toggle( handler(eventObject), handler(eventObject), [ handler(eventObject) ] )






<div id="target">
  Click here


$('#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.


The .toggle() method is provided for convenience. It is relatively straightforward to implement the same behavior by hand, and this can be necessary if the assumptions built into .toggle() prove limiting. For example, .toggle() is not guaranteed to work correctly if applied twice to the same element. Since .toggle() internally uses a click handler to do its work, we must unbind click to remove a behavior attached with .toggle(), so other click handlers can be caught in the crossfire. The implementation also calls .preventDefault() on the event, so links will not be followed and buttons will not be clicked if .toggle() has been called on the element.


Example: Click to toggle highlight on the list item.

<!DOCTYPE html>
  ul { margin:10px; list-style:inside circle; font-weight:bold; }
  li { cursor:pointer; }
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <li>Go to the store</li>
    <li>Pick up dinner</li>
    <li>Debug crash</li>

    <li>Take a jog</li>
      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":""});




Example: To toggle a style on table cells:

  function () {
  function () {
jQuery 1.6 API 中文版Clove整理、修订