jQuery - show only current ul

im new to jQuery and have a slight issue with the following navigation:

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

Essentially, I love the navigation in the Creative Production section of this lovely site: http://www.gainsburyandwhiting.com > see Portfolio > Fashion Show etc...

I 开发者_如何学JAVAneed to hide the current ul and show a fresh one in its place. At the moment, they show until I un-click the parent.

Any thoughts?

Thanks, Red

You need to hide all the ul elements that are descendant of the siblings of the current ul e.g.

$(this).siblings().find('ul').fadeOut('fast');

This finds each sibling of the clicked ul (all of which are ul in the example) and finds all the ul elements that are withing their bounds and fades them out.

In the context of your code:

$("nav ul li").find("ul").hide().end()
  .click(function(e) {
     if (this == e.target) {
       $(this).siblings().find('ul').fadeOut('fast');
       $(this).children('ul').fadeToggle('fast');    
     }
});