jQuery_jquery での hover メソッドと toggle メソッドの使用ガイド

jQuery は、mouseover、mouseout、keydown などの 2 つのイベント効果をマージするいくつかのメソッド (toggle など) を提供します。

1.ホバー機能

hover(over,out) ホバー イベント (マウスがオブジェクト上を移動し、オブジェクトの外に移動する) をシミュレートするメソッド。これは、頻繁に使用されるタスクに「保持」状態を提供するカスタム メソッドです。
パラメータ:
Over (関数): マウスが要素上に移動したときにトリガーされる関数。
out (関数): マウスが要素の外に移動したときにトリガーされる関数。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(関数(){
$("#panel h5.head").hover(function(){
$(this).next().show();// マウスがホバーしているときにトリガーされます
},function(){
$(this).next().hide();// マウスが離れるとトリガーされます
})
})

2.トグル機能

toggle(fn,fn) はクリックするたびに呼び出される関数を切り替えます。一致する要素をクリックすると、指定された最初の関数がトリガーされ、同じ要素が再度クリックされると、指定された 2 番目の関数がトリガーされます。後続のクリックごとに、これら 2 つの関数の呼び出しが順番に繰り返されます。 unbind("click") を使用して削除できます。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(関数(){
$("#panel h5.head").toggle(function(){
$(this).next().show();// 初めてクリックされたときにトリガーされます
},function(){
$(this).next().hide();// 2 回目のクリック時にトリガーされ、その後連続的に切り替わります
})
})

toggle() メソッドは、要素の表示状態を切り替えます。
選択した要素が表示されている場合は非表示にし、選択した要素が非表示になっている場合は表示します。 toggle() メソッドは、要素の表示状態を切り替えます。
選択した要素が表示されている場合は非表示にし、選択した要素が非表示になっている場合は表示します。

したがって、上記のコードは次のように書くこともできます:

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(関数(){
$("#panel h5.head").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
})
})
/*$(関数(){
$("#panel h5.head").click(function(){
$(this).next().toggle();
})
})*/

いくつかの CSS スタイルを追加することもできます:

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(関数(){
$("#panel h5.head").toggle(function(){//CSS スタイルで使用します
$(this).addClass("ハイライト");
$(this).next().show();
},function(){
$(this).removeClass("ハイライト");
$(this).next().hide();
});
})

jQuery の一般的なホバー イベントとトグル イベントについて新たに理解できましたか? この記事が少しでも役立つことを願っています。