引数に2つ以上のfunctionを設定しクリックのたびに異なる処理を実行します。スイッチの様な仕組みを簡単に作成できます。同じ要素に複数のtoggleメソッドを利用したりすると正常に機能しない場合があります。そのためか、toggleメソッドはv1.9で廃止となり利用できなくなりました。解説2つのfunctionを設定(スイッチ)サンプル(toggle/01.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、toggleメソッドの引数に「onFunc」と「offFunc」が設定されています。この2つのfunctionがクリックのたびに交互に実行されます。offFunc);});toggleメソッドの引数に設定するFunctionは以下の様な構文になっています。引数(イベントオブジェクト)を受け取ります。実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。cssメソッドを利用してdiv要素の背景色をオレンジに変更しています。onFunc(){$("div").text("ON");$("div").css("background-color","#f90");}offFuncでも同じようにtextメソッドを利用して「OFF」と表示し、cssメソッドを利用して背景色を青に変更しています。offFunc(){$("div").text("OFF");$("div").css("background-color","#09c");}結果として、div要素内をクリックするたびに背景色がオレンジ→青→オレンジと交互に切り替わり、表示される文字もON→OFF→ONと切り替わります。イベントのfunction設定は、引数に無名関数を設定することが多いです。offFunc(){$("div").text("OFF");$("div").css("background-color","#09c");});上記のように無名関数を利用する場合は2つのfunctionを仕切るカンマ(5行目)を忘れないように気を付けましょう。2以上のfunctionを設定できますtoggleメソッドは引数に2つ以上のfunctionを設定できます。サンプル(toggle/02.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、toggleメソッドの引数に「greenFunc」「orangeFunc」「blueFunc」が設定されています。cssメソッドで背景色を変更しています。blueFunc(){$("div").text("3");$("div").css("background-color","#09c");}結果として、div要素をクリックするたびに番号が1→2→3→1と繰り返され、それに合わせて背景色も緑→オレンジ→青→緑と繰り返されます。v1.9で廃止されましたtoggleメソッドはv1.9で廃止されたため利用できません。サンプル(toggle/03.html)を開いてbody内の構成とjQueryに変更がないことを確認して下さい。変更した点は以下の様にバージョンを1.9に変更した点だけです。src="../../../css_js/jquery-1.9.0.min.js"></script>結果として正しく機能せずdiv要素がアニメしながら消えてしまいます。toggleメソッドと解釈されるためです(演出効果のtoggleメソッドは廃止になっていません)。toggleメソッドがあります。2つの区別は構文の違いで見分けましょう。メモ動的な要素には対応していませんtoggleメソッドは動的な要素に利用できません。サンプル(toggle/test01.html)を開いてbody内に何も無いことを確認してください。appendメソッドを利用して動的にdiv要素を追加しています。offFunc);$("body").append("<div>");});結果としてサンプルtoggle/01.htmlと異なり、div要素をクリックしても反応せず、動的な要素に対応していないことが確認できます。ちなみに要素を追加してからtoggleメソッドを利用すれば機能させることはできます。appendメソッドをtoggleメソッドよりも前に設定しただけですが、サンプルtoggle/01.htmlと同じように機能します。