Question

I have the following code structure:

<ul class='menu'>
    <li>
         Main Menu
         <ul class='hide'>
             <li>SubMenu1</li>
             <li>SubMenu2</li>
         </ul>
    </li>
    <li>
         Main2
         <ul class='hide'>
             <li>Sub1</li>
         </ul>
    </li>
</ul>

Is there a way for me to have a jQuery click event on Main Menu and Main2 in a generic way that will remove the class ‘hide’ of the correct children each time?

Answer 1

Here is another way, which uses event delegation and only runs when the li element and not its children was clicked:

$('ul.menu').on('click', 'ul.menu > li', function(e) {
    if(e.target === this) {
        $(this).children('ul').toggleClass('hide');
    }
});

DEMO