jQuery Drop菜单点击不hover

我正在尝试使用这个下拉菜单来处理点击而不是hover，但我似乎无法让它工作。 任何人的想法？

// Drop Menu $(".navigation ul ul, .shoppingbasket ul ul").css({display: "none"}); $(".navigation ul li, .shoppingbasket ul li").hover(function(){ $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); }); 

Answer 1

.hover（）需要两个处理程序，第一个在鼠标进入时执行，第二个在鼠标离开时执行。 因此，简单地使用.click（）交换.hover（）将无法工作，因为.click（）只需要一个在您单击时执行的处理程序。 但是， .toggle（）可用于绑定多个处理程序，以便在备用点击时执行。

 $(".navigation ul ul, .shoppingbasket ul ul").css({display: "none"}); $(".navigation ul li, .shoppingbasket ul li").toggle(function(){ $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); }); 

在这里尝试一下。

此外，很难分辨HTML，但.slideDown（）会使元素可见，您可能想要使用.slideUp（） 。 所以你可能想尝试这样的事情：

 $(".navigation ul ul, .shoppingbasket ul ul").css({display: "none"}); $(".navigation ul li, .shoppingbasket ul li").toggle(function(){ $(this).find('ul:first').slideDown(400); },function(){ $(this).find('ul:first').slideUp(400); }); 

在这里尝试一下。

事实上，为什么不使用.slideToggle（） ，这会使事情更紧凑，并允许你使用.click（） ？

 $(".navigation ul ul, .shoppingbasket ul ul").css({display: "none"}); $(".navigation ul li, .shoppingbasket ul li").click(function(){ $(this).find('ul:first').slideToggle(400); }); 

在这里尝试一下。