jQuery .toggle() to show and hide a sub-menu

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

Answer 1

Your code was:

$('.parent li').click(function(){
    event.preventDefault();
    $('.child').slideToggle('slow');
});

$('.child') selects all the "children". Change it to $('.child', this), to select only the ones inside the current element.

The click event bubbles, so in order to ensure that only clicking the parent itself toggles the state, you can compare the event.target with this.

However, this is quicker:

$('.parent > li > a').click(function(){
    event.preventDefault();
    $(this).parent().find('.child').slideToggle('slow');
});

See fiddle

EDIT as @Jasper pointed out, this is shorter/quicker:

$('.parent > li > a').click(function(){
    event.preventDefault();
    $(this).siblings('.child').slideToggle('slow');
});