2011-07-16 176 views
2

我试图让这个下拉菜单使用单击而不是悬停,但我似乎无法让它工作。任何想法的人?jQuery下拉菜单单击不悬停

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

你试过用 '点击'(2号线) – Guidhouse

+0

@Guidhouse一词替换 '悬停' - 这是行不通的,。点击()只需要一个处理程序,.hover ()需要两个 - 请参阅我的答案。 –

回答

4

.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.

此外,这是很难说的w/o的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.

+0

谢谢你的回复我去了一个头,尝试了示例代码,发现下拉链接不起作用,请参阅此处的问题http://www.media21a.co.uk/clientlogin/benaiahmatheson/benaiah-matheson/ – Delete

+0

@Adam - 现在没有太多时间,但问题是链接正在工作。您点击下拉菜单,但同样的CLICK也会将您发送到另一个页面。您必须禁用单击顶层项目的默认功能(这可能是为什么它最初使用悬停而不是单击)。 gl - 我有时间后可能会更新。 –

+0

另一个问题是,当你有更多的子UL ..这是行不通的。 – numediaweb