toggle

UK[ˈtɒgl] US[ˈtɑ:gl]

n.スティック ボタン; 投げ縄ボタン; 変換キー; 切り替えキー

v.スイッチ

jquery toggle()方法 構文

関数:toggle() メソッドは、2 つ以上のイベント ハンドラー関数をバインドして、選択した要素のクリック イベントに順番に応答するために使用されます。このメソッドは、選択した要素の Hide() メソッドと show() メソッドを切り替えるために使用することもできます。

2 つ以上の関数をトグル イベントにバインドします: 指定された要素をクリックすると、2 つ以上の関数を順番に切り替えます。 3 つ以上の関数が指定されている場合、toggle() メソッドはすべての関数を切り替えます。たとえば、3 つの関数がある場合、最初のクリックで最初の関数が呼び出され、2 回目のクリックで 2 番目の関数が呼び出され、3 回目のクリックで 3 番目の関数が呼び出されます。 4 回目のクリックで最初の関数が再度呼び出され、以下同様に続きます。

構文: $(selector).toggle(function1(),function2(),functionN(),...)

パラメータ:

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


Hide() と Show(): 各要素が表示されるかどうかを確認します。要素が非表示の場合は、show() を実行します。要素が表示される場合、要素は Hide() になります。これによりスイッチング効果が生まれます。

#構文: $(selector).toggle(speed,callback)

パラメータ:

パラメータ説明
speed オプション。非表示/表示効果の速度を指定します。デフォルトは「0」です。可能な値: ミリ秒 (例: 1500) 「遅い」 「通常」 「速い」
callbackオプション。 toggle() メソッドの完了時に実行される関数。


要素の表示または非表示: 一致するすべての要素のみを表示するか非表示にするかを指定します。

##構文: $(selector).toggle(switch)

##パラメータ:

#パラメータ説明スイッチ 必須。 toggle() が選択されたすべての要素のみを表示するか非表示にするかを指定するブール値。 true - 要素を表示 false - 要素を非表示#

jquery toggle()方法 例

<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
  );
});
</script>
</head>
<body>
<button>请点击这里，来切换不同的背景颜色</button>
</body>
</html>
インスタンスの実行 »

[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します