jQuery的菜單問題

Question

誰能幫爲什麼當我點擊菜單鏈接這是不工作？當我點擊菜單時，它不顯示下拉菜單。

請此鏈接jsfiddle

編輯

現在我改變了它的代碼上查看代碼。現在，當我點擊菜單鏈接時，它會顯示下拉菜單，但當我點擊其他地方時，它不會隱藏它。

jsfiddle

Answer 1

試試這個方法：

$(function() { 
     $('.top-nav li').click(function() { 
      $('ul',this).toggle(); 
     }); 
    }); 

看起來你已經使用了.hover()功能語法click這是行不通的。

而且不要忘了return false;或鏈接將被緊隨其後。或者，您可以使用：e.preventdefault();。

return false同時做兩e.preventDefault()和e.stopPropagtion()。但是爲了使用e不應將參數添加到函數：$('.top-nav li').click(function(e) {

Answer 2

這爲我工作：

$(function() { 
    $('.top-nav li a').click(function() { 
     //this reveals the ul that is immediately after the clicked item 
     $(this).next('ul').toggle(); 
    }); 
});​ 

你可能想增加一個功能，可以隱藏所有其他subnavs當一個人發現，否則你可以讓他們全部打開。這應該這樣做：

$(function() { 
    $('.top-nav li a').click(function() { 
     //this hides all uls inside top-nav 
     $('.top-nav ul').hide(); 
     //this reveals the ul that is immediately after the clicked item 
     $(this).next('ul').toggle(); 
    }); 
});​ 

希望幫助！

Answer 3

試試這個

$(function() { 
    $("ul.top-nav li").click(function() { 
    $('ul', this).css("display", "block"); 
    }); 

    $("ul.top-nav li").mouseleave(function() { 
    $('ul', this).css("display", "none"); 
    }); 
});