making a vertical sliding menu with jquery

Question

here's my html:

<ul id="dmenu">
    <li><a href="#">menu item one</a></li>

    <li><a href="#">menu item two</a>
            <ul class="displayNone">
                <li><a href="#">menu item one</a>
            </ul>
    </li>
</ul>

When the user clicks on one of the a tags, I want my code to check wether there are any ul tags in the parent li tag. If there are, I then want to preventdefault action for the a tag and slideToggle the child ul element

my jquery atm:

$('#dmenu > a').click(function(e) {
    if (this.parent().has('ul')) {
        e.preventDefault();
        $(this).children().slideToggle();
    }
});

Answer 1

you are doing the slide toggle on the child of the a

change $(this).children().slideToggle(); to

$(this).parent().children('ul').slideToggle();

also your selector #dmenu > a is wrong - your top level menu doesn't have that id and if it did there are no direct anchors as children of the ul - remove the > and add the id dmenu to you top ul or container element

Edit

As pointed out by Austin, as you have nested lists you may want to limit your click events to the top level only so you can use the #dmenu > li a

Example