jQuery.toggle()関数の応用の詳細説明-jsチュートリアル-php.cn

jQuery.toggle()関数の応用の詳細説明

黄舟

リリース： 2017-06-26 13:35:21

オリジナル

3159 人が閲覧しました

toggle() 関数は、一致するすべての要素を切り替えるために使用されます。さらに、要素の切り替えにトランジションアニメーション効果を指定することもできます。

いわゆる「スイッチ」とは、要素が現在表示されている場合は非表示にし、要素が現在非表示の場合は表示 (可視) にすることを意味します。

今回紹介するtoggle()関数は要素の表示・非表示を切り替えるために使用します。 jQuery には、同じ名前の event関数 toggle() もあります。これは、クリックイベントをバインドし、トリガーされたときに異なるイベント処理関数を順番に実行するために使用されます。

この関数はjQueryオブジェクト(インスタンス)に属します。

Syntax

jQuery 1.0ではこの機能が追加されました。 toggle() 関数には主に以下の 2 つの使用方法があります:

使用方法 1: jQuery 1.4.3 では新たにパラメーターイージングをサポートしました。

jQueryObject.toggle( [ duration ] [, easing ] [, complete ] )

ログイン後にコピー

使用法 2:

jQueryObject.toggle( options )

ログイン後にコピー

使用法 2 は、使用法 1 のバリエーションです。必要なオプションパラメータをオブジェクト形式で指定します（使用方法 1 よりも多くのオプションパラメータを指定できます）。

使用法 3: jQuery 1.3 では、この使用法が新たにサポートされました。

jQueryObject.toggle( showOrHide )

ログイン後にコピー

ブール値 showOrHide を使用して、要素を表示するか非表示にするかを指定します。

パラメータ

jQuery.toggle()関数の応用の詳細説明

toggle() にパラメータが指定されていない場合、要素はアニメーション効果なしで最も速い方法で直接表示/非表示になります。

パラメータオプションオブジェクトは、次の属性 (以下の属性はすべてオプションです) を認識できます:

jQuery.toggle()関数の応用の詳細説明

さらに、jQuery 1.4 および 1.8 では、パラメータオプションに対する多くの新しいオプションサポートも追加されましたが、これらのパラメータはサポートされていません。は一般的に使用されないため、ここでは詳しく説明しません。詳細については、jQuery の公式ドキュメントを参照してください。

戻り値

toggle()関数の戻り値はjQuery型で、現在のjQueryオブジェクトそのものを返します。

示例&说明

请参考下面这段初始HTML代码：

<p>CodePlayer</p>
<p>专注于编程开发技术分享</p>
切换效果：
<select id="animation">
    <option value="1">toggle( )</option>
    <option value="2">toggle( "slow" )</option>
    <option value="3">toggle( 3000 )</option>
    <option value="4">toggle( 1000, complete )</option>
    <option value="5">toggle( 1000, "linear" )</option>
    <option value="6">toggle( options )</option>
    <option value="7">toggle( true )</option>
    <option value="8">toggle( false )</option>
</select>
<input id="btnSwitch" type="button" value="切换显示/隐藏" >

ログイン後にコピー

以下是与toggle()函数相关的jQuery示例代码，以演示toggle()函数的具体用法：

//【切换显示/隐藏】按钮
$("#btnSwitch").click( function(){
    var v = $("#animation").val();
    if( v == "1" ){
        $("p").toggle( );       
    }else if(v == "2"){
        $("p").toggle( "slow" );    
    }else if(v == "3"){
        $("p").toggle( 3000 );  
    }else if(v == "4"){
        $("p").toggle( 1000, function(){
            alert("切换完毕!");
        } );
    }else if(v == "5"){
        $("p").toggle( 1000, "linear" );    
    }else if(v == "6"){
        $("p").toggle( { duration: 1000 } );    
    }else if(v == "7"){
        $("p").toggle( true ); // 相当于$("p").show(); 
    }else if(v == "8"){
        $("p").toggle( false );  // 相当于$("p").hide();
    }
} );

ログイン後にコピー

以上がjQuery.toggle()関数の応用の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。