Question

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")