jQuery中toggle()函數的使用實例_jquery

今天遇到一個有趣的例子，將它記錄下來。

一個一級選單，裡邊有一個二級選單，二級選單是透過錨點來連結頁面元素的。想要實現的效果是當點擊錨點時，頁面連結到對應錨點，同時二級選單隱藏，再點擊一級選單時，繼續執行。 。

其中試了很多種方法都不行，最後透過讀jquery的toggle函數實現了。

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

另附上toggle()的使用說明

toggle(fn,fn)

每次點擊時切換要呼叫的函數。
如果點選了一個符合的元素，則觸發指定的第一個函數，當再次點擊相同元素時，則觸發指定的第二個函數。隨後的每次點擊都重複對這兩個函數的輪番呼叫。

可以使用unbind("click")來刪除。

回傳值
jQuery

參數

fn (Function) : 第奇數次點擊時要執行的函數。

fn (Function) : 第偶數次點擊時要執行的函數。

範例

對表格的切換一個類別

jQuery 程式碼:

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

補充：toggle只有點擊的時候好使，hover只是滑鼠移進移出的事件，跟點擊沒關係。兩個可以一起用