jquery - use the jquery find() method to hide childs when a parent is selected

Question

I have the following code which i have found from here Click menu with children :

    $("a").click(function(e) {
        var children = $(this).closest("li").children("ul");
        if (children.is(":visible")) {
            children.slideUp();//use custom hide here
        }
        else {
             children.slideDown();//use custom show here
             }
         });
    $("li ul").hide(); //quick hack to hide all children to start with

I want each time i click on a parent, all the childrens of other parents to get hidden.

I create my code here http://jsfiddle.net/FTdxS/42/ but i can not figure out how can i make the children of other parents to hide when i click on a specific parent.

I know that i have to use the find method but i can not understand it.

Any help is welcomed.

Answer 1

$("a").click(function(e) {
    $(this).closest("li").children("ul").slideToggle().end()
           .siblings('li').children('ul').slideUp();
});

小提琴

Answer 2

You can use this in the else condition :

    $('li ul:visible').not(children).slideUp()

fiddle : http://jsfiddle.net/FTdxS/44/