jQuery_jquery での toggle() 関数の使用例

今日は興味深い例に出会ったので記録しておきます。

第 1 レベルのメニューには、内部に第 2 レベルのメニューがあります。第 2 レベルのメニューは、アンカー ポイントを介してページ要素をリンクします。望ましい効果は、アンカーをクリックすると、ページが対応するアンカーにリンクし、第 1 レベルのメニューが再度クリックされると、第 2 レベルのメニューが非表示になり、実行が継続されることです。 。

いろいろ試しましたが、結局、jqueryのtoggle関数を読んで気づきました。

    //这样写可以
    $(".nav").toggle(function(){
      $(".content").slideToggle();
    });
    //这样写不可以
    $(".nav").toggle(function(){
     $(".content").slideDown();
   },function(){
     $(".content").slideUp();
   });
   //这样写也可以
    $(".nav").click(function(){
      $(".content").toggle("slow");
    });

toggle() の使用手順を添付します

トグル(fn,fn)

クリックするたびに呼び出される関数を切り替えます。
一致する要素をクリックすると、指定された最初の関数がトリガーされ、同じ要素が再度クリックされると、指定された 2 番目の関数がトリガーされます。後続のクリックごとに、これら 2 つの関数の呼び出しが順番に繰り返されます。

unbind("click") を使用して削除できます。

戻り値
jQuery

パラメータ

fn (関数): 奇数クリック時に実行される関数。

fn (関数): 偶数クリック時に実行される関数。

例

クラスをテーブルに切り替えます

jQuery コード:

$("td").toggle( 
function () { 
$(this).addClass("selected"); 
}, 
function () { 
$(this).removeClass("selected"); 
} 
);

追加: トグルはクリックされた場合にのみ機能し、ホバーはマウスが出入りするときの単なるイベントであり、クリックとは関係ありません。両方併用可能