UntitledGraphic UntitledGraphic - 3 years ago 158
jQuery Question

Drop down menu with on click toggle

I am attempting to create a drop down menu which activates on click rather than on hover. So far I have the on click working with a little javascript, but whilst the sub menus show well and if another menu is clicked other submenus hide, I can't work out how to hide a sub menu if its parent is clicked.

EG in this JS fiddle I can click on "parent 1" to reveal its children and when I click on "parent 2" parent 1's children hide and Parent 2's children show. But if Parent 1's children show I want to be able to hide them by clicking on Parent 1 again, (or even better anywhere outside the children)

I have seen examples working where each parent and sub menu is given individual classes or ids. I want to avoid that as it needs to work in a cms.

Here's the basic code I have

The HTML:

<div>
<ul>
<li><a href="#">Parent 1</a>
<ul>
<li><a href="#">Parent 1 &raquo; Child 1</a></li>
<li><a href="#">Parent 1 &raquo; Child 1</a></li>
<li><a href="#">Parent 1 &raquo; Child 1</a></li>
</ul>
</li>
<li><a href="#">Parent 2</a>
<ul>
<li><a href="#">Parent 2 &raquo; Child 2</a></li>
<li><a href="#">Parent 2 &raquo; Child 2</a></li>
<li><a href="#">Parent 2 &raquo; Child 2</a></li>
</ul>
</li>
<li><a href="#">Parent 3</a>
<ul>
<li><a href="#">Parent 3 &raquo; Child 3</a></li>
<li><a href="#">Parent 3 &raquo; Child 3</a></li>
<li><a href="#">Parent 3 &raquo; Child 3</a></li>
</ul>
</li>
</ul>




The javascript:

$(document).ready(function () {
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
});
});


CSS is probably not necessary, but its on the fiddle if needed

PSL PSL
Answer Source

Try this way.

$(document).ready(function () {
    $("li").click(function () {
        //Toggle the child but don't include them in the hide selector using .not()
        $('li > ul').not($(this).children("ul").toggle()).hide();

    });
});

Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download