Jquery selectors question

Question

Hi all, I am not an expert at jquery but trying to get a menu to work. Basically, I have a menu made of up to 3 levels of nested lists. The first level has a little arrow has a background image that opens or close when opening the first level list. Any other nested lists don't need to have the background image. My script opens the menu when you click on it and is also supposed to switch the first level list from a class "inactive" to a class "active". Here is the script:

$(document).ready(function(){

$("#left-navigation-holder ul.level1 li.inactive").toggle(function(){

$(this).addClass("active");

}, function () {

$(this).removeClass("active");

});


$("#left-navigation-holder li a").click(function(){

menu = $(this).parent('li').children('ul');

menu.toggle();

});

});

The problem is that the toggle function also happens when clicking on second and third level lists causing the arrows to toggle even if the first level list isn't clicked on. I thought using $("#left-navigation-holder ul.level1 li.inactive").toggle would limit the function to the first level list with a class "inactive".

Any help would be really appreciated.

Ben

Answer 1

Use the immediate child selector, like this:

$("#left-navigation-holder ul.level1 > li.inactive")
//or...
$("#left-navigation-holder > ul > li > a")

In your selectors, ul.level1 li.inactive means a <li class="inactive"> anywhere beneath the <ul class="level1">, putting the > to make it ul.level1 > li.inactive says to only match that <li> directly beneath that <ul>, not any number of levels beneath.

You could probably do this overall, removing that .level1 unless it serves another purpose:

$("#left-navigation-holder > ul > li.inactive")

Answer 2

You can use $("#left-navigation-holder ul > li.inactive") which only selects the direct children of the list (via the > selector).

Answer 3

Hi all, Well I am back. i was testing my code this morning and realised that the list that don't have a sub-level don't act right anymore. If I set a link on these, clicking doesn't sends me to the requested URL, but only triggers the change of class between "active" and "inactive". The code looks currently like this:

$(document).ready(function(){

$(".left-navigation-holder li a").click(function(){
    menu = $(this).parent('li').children('ul');
    menu.toggle();
});

$(".left-navigation-holder ul.level1 > li").toggle(function(){
    $(this).addClass("active");
    }, function () {
    $(this).removeClass("active");
});

$(".left-navigation-holder ul > li > ul").click(function(toggle) {
    toggle.stopPropagation();
    return false;
});

});

If I remove the toggle function, the links work.

I am almost sure this is a simple fix but my knowledge is pretty bad I must say. Thanks, Ben