CODEWITHSUNDEEP
jquerymenutraversal
paulcripps
paulcripps

Reputation: 157

jQuery list item Menu

We have a main menu, that could consist of any number or parent child items. We want all children ULs hidden to start with, then on click of a given li it's child UL shows.

You can see this working to a degree here: http://jsfiddle.net/JnL58/12/

$("ul.nav_categories ul").hide();

$("ul.nav_categories li").click(function(el){
    el.preventDefault();
    var cur_el = $("> ul", this);
    if (cur_el.length > 0) {
        $("> ul", this).show();
    }
});

The thing we are struggling with is hiding the relevant UL's APART from the clicked elements parent UL's or sibling Ul's.

So essentially its a drop down menu like this http://jsfiddle.net/FjCcT/4/ that works on click rather than rollovers :

$("ul.nav_categories ul").hide();
$("ul.nav_categories li").hover(function(){
    if ($("> ul", this).length > 0) {
        $("> ul", this).show();
    }
}, function(){
    if ($("> ul", this).length > 0) {
        $("> ul", this).hide();
    }
});

Please note this need to work on varying levels, eg 2, 3, 4 and possibly 5 items deep. The lists are dynamic so we will not know the number of levels.

Upvotes: 1

Views: 1039

Answers (1)

Kaloyan
Kaloyan

Reputation: 7352

Total edit. Of course the solution has to be super simple. :3

$("ul.nav_categories ul").hide();

$("ul.nav_categories li").click(function(){
    $('li > ul').not($(this).parents('ul')).hide();
    $(this).find('> ul').show();
    return false;
});

http://jsfiddle.net/Bhnzc/3/

Upvotes: 1

Related Questions