jQuery イベント - toggle() メソッド

jQuery イベントリファレンスマニュアル

例

異なる背景色を切り替え：

「p」を切り替えます：
  function(){
  「body」の背景色を緑色に設定します。
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);

実際に試してみてください

定義と使用法

toggle() メソッドは、選択された要素のクリックイベントに2つ以上のイベントハンドラーファンクションをバインドするために使用されます。

このメソッドは、選択された要素の hide() および show() メソッド。

Toggle イベントに2つまたは複数の関数をバインドする

指定された要素がクリックされたときに、2つまたは複数の関数間で交互に切り替えます。

2つ以上の関数が規定されている場合、toggle() メソッドは全ての関数を切り替えます。例えば、3つの関数がある場合、1回目のクリックで最初の関数が呼び出され、2回目のクリックで2番目の関数が呼び出され、3回目のクリックで3番目の関数が呼び出されます。4回目のクリックで最初の関数が再び呼び出されます。と続きます。

文法

$(selector).toggle(function1(),function2(),functionN(),...)

実際に試してみてください

パラメータ 説明
function1() 必要。要素が偶数回クリックされたときに実行される関数を規定します。
function2() 必要。要素が奇数回クリックされたときに実行される関数を規定します。
functionN(),... オプション。切り替えしたい他の関数を規定します。

toggle Hide() と Show()

各要素が可視かどうかを確認します。

要素が隠れている場合、show() を実行します。要素が可視の場合、要素を hide() します。これにより、切り替え効果を作成できます。

文法

$(selector).toggle(speed,callback)

実際に試してみてください

パラメータ 説明
speed

オプション。hide/show 効果の速度を規定します。デフォルトは "0" です。

可能な値：

  • ミリ秒（例えば 1500）
  • "slow"
  • "normal"
  • "fast"
callback

オプション。toggle() メソッドが完了した際に実行される関数。

callback に関する知識をさらに学ぶには、私たちの Callback 関数のチュートリアル。

要素の表示または隠し

全ての一致する要素を表示または隠すかどうかを規定します。

文法

$(selector).toggle(switch)

実際に試してみてください

パラメータ 説明
switch

必要。ブール値、toggle() が全ての選択された要素を表示または隠すべきかどうかを規定します。

  • true - 要素を表示する
  • false - 要素を隠す

jQuery イベントリファレンスマニュアル