jQuery .toggle () para mostrar y ocultar un submenú

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

Demostración: http://jsfiddle.net/jasper/z7Zgw/1/

Básicamente, el código anterior usa this para hacer referencia al elemento

pulsado para que podamos encontrar el elemento .child que es un elemento .child elemento

pulsado.

Esto: $('.child')

Cambiado a: $(this).children('.child')

Actualizar

También puede detener la propagación del evento de click en los elementos .child nesteds como este:

 $('.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(); }); 

Demostración: http://jsfiddle.net/jasper/z7Zgw/9/

Docs:

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

Tu código fue:

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

$('.child') selecciona todos los “niños”. Cámbielo a $('.child', this) , para seleccionar solo los que están dentro del elemento actual.

El evento click burbujas, de modo que para asegurarse de que solo haciendo clic en el propio padre cambia al estado, puede comparar el event.target . event.target con this .

Sin embargo, esto es más rápido:

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

Ver violín

EDITAR como @Jasper señaló, esto es más corto / más rápido:

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