Question

How can I use jQuery to .toggle the sub-menu of a li with a class of menu-item after the user clicks on the parent li. The menu follows this pattern:

   <ul class="menu">
        <li class="menu-item"><a href="#">Click Here To Toggle Child UL</a>
            <ul class="sub-menu"><!-- Toggle all this -->
                <li class="menu-item"><a href="..">Sub Menu Item 1</a></li>
                <li class="menu-item"><a href="..">Sub Menu Item 2</a></li>
            </ul><!-- Toggle all this -->
        </li>
        <li class="menu-item"><a href="#">Menu Item Without Children</a></li>
    </ul>

I know I need to check if the li with a class of menu-item has a ul child with a class of sub-menu, if so then toggle that ul. But I dont know how it would be best to write the code for that. Any help would be appreciated.

Answer 1

Use the following using jQuery library:

$('.menu > .menu-item:has(ul) > a').click(function() {
    $(this).siblings('ul').toggle();
    return false;
});

jsfiddle: http://jsfiddle.net/GGg44/3/