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: "n开发者_Go百科one"}).slideDown(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});

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

Try it out here.

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

Try it out here.

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

Try it out here.