jQueryにおけるtoggale()関数の使用例

1330 ワード

今日は面白い例に会ったらメモしてください。
一級メニューの中には二級メニューがあります。二級メニューはアンカーポイントでページ要素をリンクしています。達成したい効果は、アンカーポイントをクリックすると、ページが該当アンカーポイントにリンクし、同時に2級メニューが隠れて、もう1級メニューをクリックした時に実行します。
いろんな方法を試してみましたが、最後はjqueryのtoggle関数を読んで実現しました。

    //     
    $(".nav").toggle(function(){
      $(".content").slideToggle();
    });
    //      
    $(".nav").toggle(function(){
     $(".content").slideDown();
   },function(){
     $(".content").slideUp();
   });
   //      
    $(".nav").click(function(){
      $(".content").toggle("slow");
    });

toggg()の使用説明を添付します。
toggg le(fn,fn)
クリックするたびに呼び出す関数を切り替えます。
一致する要素をクリックすると、指定された最初の関数がトリガされ、再び同じ要素をクリックすると、指定された2番目の関数がトリガされます。その後のクリックごとに、この2つの関数の順番呼び出しが繰り返されます。
unbind(「click」)を使用して削除することができます。
戻り値
jQuery
パラメータ
fn(Function):奇数回目のクリックで実行する関数。
fn(Function):偶数回目のクリックで実行する関数。

テーブルの切り替え
jQueryコード:

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

補足:toggaleはクリックする時だけ有効で、hoverはマウスを移動して移動するイベントで、クリックと関係がありません。二つは一緒に使えます。