jQuery 下拉菜单点击而不是悬停

Question

我正在尝试让这个下拉菜单通过点击而不是悬停来工作，但我似乎无法让它工作。大家有什么想法吗？

// 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()需要两个处理程序，第一个处理程序在鼠标进入时执行，第二个处理程序在鼠标离开时执行。为此，只需交换 .hover()与 .click()不会工作，因为 .click()仅需要一个在您单击时执行的处理程序。然而，.toggle()可用于绑定(bind)多个处理程序以在交替单击时执行。

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

Try it out here.

此外，如果没有 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);
});

Try it out here.

事实上，为什么不使用 .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);
});

Try it out here.