Question

I’m trying to use show/hide on a submenu. It looks like this:

1. Parent 1
2. Parent 2
   1. Child A
   2. Child B
3. Parent 3
   1. Child C
   2. Child D

I only want to show the submenu when I click on its parent. Currently, whenever I click on any parent, I get all of the submenus.

Like so: http://jsfiddle.net/saltcod/z7Zgw/

Also, clicking on a link in the submenu toggles the menu back up.

Answer 1

//select all the `<li>` element that are children of the `.parent` element
$('.parent').children().click(function(){
    
    //now find the `.child` elements that are direct children of the clicked `<li>` and toggle it into or out-of-view
    $(this).children('.child').slideToggle('slow');     
});

Demo: http://jsfiddle.net/jasper/z7Zgw/1/

Basically the code above uses this to reference the clicked <li> element so we can find the .child element that is a child of the clicked <li> element.

This: $('.child')

Changed to: $(this).children('.child')

Update

Also you can stop the propagation of the click event on the nested .child elements like this:

$('.parent').children().click(function(){
    $(this).children('.child').slideToggle('slow');

//select all the `.child` elements and stop the propagation of click events on the elements
}).children('.child').click(function (event) {
    event.stopPropagation();
});

Demo: http://jsfiddle.net/jasper/z7Zgw/9/

Docs:

• event.stopPropagation(): http://api.jquery.com/event.stopPropagation
• .children(): http://api.jquery.com/children