jQuery下拉菜单单击不悬停 [英] jQuery Drop Menu Click not Hover

问题描述

我正在尝试使此下拉菜单与单击一起使用，而不是将鼠标悬停在上面，但我似乎无法使其正常工作.有任何想法吗?

I'm trying get this drop menu to work with click instead of hover but I cant seem to get it to work. Any ideas anyone ?

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

推荐答案

.hover() 具有两个处理程序，第一个处理程序在您的鼠标进入时执行，第二个处理程序在您的鼠标离开时执行.因此，只需将 .hover() 与 .click() 不起作用，因为 .toggle() 可用于绑定多个处理程序只需点击几下即可执行.

.hover() takes two handlers, the first one is executed when your mouse enters, the second is executed when your mouse leaves. For this reason, simply swapping .hover() with .click() will not work, since .click() only takes one handler that executes when you click. However, .toggle() can be used to bind multiple handlers to be executed on alternate clicks.

$(".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() .因此，您可能想尝试这样的事情:

Also, it's hard to tell w/o the HTML, but .slideDown() will make the element visible, and you may want to use .slideUp(). So you might want to try something like this:

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

In fact, why not use .slideToggle(), which makes things more compact and allows you to use .click()?

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

在此处尝试.

这篇关于jQuery下拉菜单单击不悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！