jQuery.toggle()関数の使用例を詳しく解説

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

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

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

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

構文

この関数は jQuery 1.0 の新しい関数です。 toggle() 関数には主に次の 2 つの使用方法があります:

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

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

使用法 2:

jQueryObject.toggle( options )

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

使用法 3: jQuery 1.3 はこの使用法を新たにサポートします。

jQueryObject.toggle( showOrHide )

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

パラメータ

パラメータの説明

duration Optional/String/Number タイプは、トランジション アニメーションの実行時間 (ミリ秒数) を指定します。デフォルト値は 400 です。このパラメータには、string"fast"(=200) または "slow"(=600) を指定することもできます。

easing オプション/文字列タイプは、使用するアニメーション効果を指定します。デフォルトは「スイング」ですが、「リニア」またはその他のカスタム アニメーション スタイル関数名に設定することもできます。

complete オプション/関数型要素は、関数が表示された後に実行する必要があります。関数内のこれは、現在の DOM 要素を指します。

オプションオブジェクトクラスタイプで指定されたオプションパラメータオブジェクト。

showOrHide Boolean 型は、要素の表示/非表示をブール値で指定します。 true の場合、要素は表示されます。それ以外の場合、要素は非表示になります。

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

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

属性 属性の説明

duration パラメータの期間を参照してください。

イージング パラメーターのイージングを参照してください。

complete 「パラメータの完了」を参照してください。

queue ブール型はアニメーションをエフェクトキューに入れるかどうかを示します。デフォルトは true です。バージョン 1.7 以降、このパラメータは、指定された名前でエフェクト キューに入れるために使用される文字列にすることができます。指定したキューが自動的に開始しない場合は、手動で dequeue("queueName") を呼び出してキューを開始する必要があります。

さらに、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() 関数の具体的な使用法を示す、toggle() 関数に関連する jQuery サンプル コードです。 :

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