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()可用于绑定多个处理程序，以便在备用点击时执行。

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

jQuery Drop菜单点击不悬停

1 个答案: