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

Estoy tratando de usar mostrar / ocultar en un submenú. Se parece a esto:

  1. Padre 1
  2. Padre 2
    1. Niño A
    2. Niño b
  3. Padre 3
    1. Niño c
    2. Niño d

Solo quiero mostrar el submenú cuando hago clic en su padre. Actualmente, cada vez que hago clic en cualquier padre, obtengo todos los submenús.

Como así: http://jsfiddle.net/saltcod/z7Zgw/

Además, al hacer clic en un enlace en el submenú, se activa la copia de seguridad del menú.

//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:

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