jQuery accordion for multiple nested lists

Question

I'm struggling to incorporate the second nested list of my menu so that they can open onclick. Below is my code.

Also, how can I make it so clicking to expand a list doesn't trigger any other events? Right now if you click them, my entire menu slides closed from another script (this is for a mobile responsive menu) So if my menu-item li has a nested list, I want the click to ONLY open or close its nested list and do nothing else.

http://jsfiddle.net/notanothercliche/36vCh/

<ul class="menu" id="menu-menu">

    <li class="menu-item>Home</li> <!-- end Home menu-item -->

    <li class="menu-item>Properties

    <ul class="dropdown-menu">

        <li class="menu-item>Dubai

        <ul class="dropdown-menu">

            <li class="menu-item>Residential

            <ul class="dropdown-menu">

                <li class="menu-item>Apartments</li>

                <li class="menu-item>Villas</a></li>

            </ul> <!-- end Residential dropdown-menu -->

                </li> <!-- end Residential menu-item -->

        </ul> <!-- end Dubai dropdown-menu -->

        </li> <!-- end Dubai menu-item -->

    </ul> <!-- end Properties dropdown-menu -->

    </li> <!-- end Properties menu-item -->

</ul> <!-- end menu-menu -->

Answer 1

You don't have to work so hard. There's probably no need to manipulate classes like you are.

http://jsfiddle.net/isherwood/36vCh/6

jQuery("#menu-menu a").on("click", function (e) {
    if (jQuery(this).parent().has("ul")) {
        e.preventDefault();
    }
    $(this).next('ul').slideToggle();
});

Note that I added a few missing quotes and required href attributes.