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()第二のときにマウスの葉が実行され、あなたのマウスが入ったときに最初のものが実行され、2つのハンドラを取ります。このため、.click()は、クリックしたときに実行されるハンドラが1つしかないため、.hover()を.click()と交換するだけで動作しません。しかし、.toggle()を使用して、複数のハンドラをバインドして、1回のクリックで実行することができます。

$(".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()を使用することをお勧めします。なぜ物事がよりコンパクトになり、あなたが.click()を使用することができます.slideToggle()を、使用しないで、実際には

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

：？だから、このような何かをしようとする場合がありますか

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