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"); 
    }); 
});