.toggle() | jQuery 1.9 日本語リファレンス

.toggle() 非推奨 1.9 削除

http://api.jquery.com/toggle-event/

要素がクリックされるたびに指定した複数の関数を順に実行します。

jQueryには、アニメーション用のメソッドで同じ名前のメソッド toggleが存在します。アニメーションのメソッドなのか、イベントのメソッドなのかは引数によって判定されます。

.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject)] ) 1.0追加

戻り値:jQuery

引数	説明
handler	マッチした要素が偶数番目にクリックされた際に実行する関数を指定します。
handler	マッチした要素が奇数番目にクリックされた際に実行する関数を指定します。
[handler]	以降の関数を指定すると、そのサイクルにしたがって順番にクリックした際に各関数が順番に実行されるようになります。

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

デモ

リスト内のテキストをクリックする度にスタイルが切り替わります。

<!DOCTYPE html>
<html>
<head>
<style>
  ul { margin:10px; list-style:inside circle; font-weight:bold; }
  li { cursor:pointer; }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>買い出しに行く</li>
    <li>夕食を決める</li>
    <li>デバッグを行う</li>
    <li>ジョギング</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>