jQuery - change the CSS of the menu item's path in the dynamically created menu

Question

I'm using that jQuery Vertical Menu Library www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm I want to accomplish the selection of the selected path. Let's say that I go through that menu (in the demo on that site above) by the path:

Folder 2 > Folder 2.1 > Folder 3.1.1 > SubItem 3.1.1.1

When I click on the SubItem 3.1.1.1 I want that the all previous items (from the path above) changes their backgrounds. The code below selects only the top-most item. How to fix that ?

    $('#nav > li').click(function () {
        $(this).children('a').css('background-color', 'red'); 
        $(this).parents('ul').each(function () { $(this).prev('a').css('background-color', 'red'); });
    });

. In that scenario, my code fails.

Answer 1

The way the menu seems to be organized, the click event will bubble up from child li to parent li, so you just need to bind the click event to all menu items and set the background for the current element:

$('#nav li').click(function () {
    $(this).children('a').css('background-color', 'red'); 
});

You still might like to unset the red background when you click on another menu item