jQuery - show only current ul (using a tags as the click rather than li's)

I am trying开发者_如何学JAVA to show/hide child ul's in the following navigation. I managed to get it working with the help of Aleksi Yrttiaho.

I then realised that I hadn't coded the list items as links in my jsFiddle, and as soon as I did the function broke, can someone help me out get it working again?

This jsFiddle is the correct markup but with the function not working

This is the old markup (pre a tags essentially) and you can see it working

So the only difference is that I want the function to run on the click of a link, rather than a click of the li.

Many thanks, Red

give this a try

$("nav li").find("ul").hide().end().find("a")
// hide all other ul's in the nav
.click(function(e) {
    $(this).parent().siblings().find('ul').fadeOut('fast');
    $(this).parent().children('ul').delay(200).fadeToggle('fast');
});

http://jsfiddle.net/866UZ/

In your markup you should enclose all the li's inside nav in a ul tag. Because li's should always be inside a ul tag. And your selector is also nav ul li which will look for ul tag inside nav thats whay it was not working as expected.

Take a look at this working demo I have fixed it.

http://jsfiddle.net/6Dh8j/24/