jQuery y Propagación de varias clases

Question

-- UPDATE --

Yo era un poco tonto, el niño UL estaban cubriendo el padre de la lista (opacidad fadeout), por lo que no podía hacer clic en los grupos después de que hace clic una vez.Oops!De todos modos gracias por ayudarme chicos!

---

El problema con jQuery propagación es algo que todo el mundo está luchando con.Pero aquí es mi caso que puedo encontrar en ninguna parte para solucionar (o tal vez estoy mudo para que no se vea en los lugares correctos o mi jQuery habilidades simplemente no son lo suficientemente bueno para entender).

El caso base es que tengo algunos grupos, y en los grupos hay varias opciones.cuando haga clic en uno de los grupos, las opciones de pop-up.PERO, cuando hago clic en una de las opciones de la totalidad apareciendo actividad se dispara otra vez, porque son los hijos de los padres, y así lo reconoce la clase donde los niños están atrapados en.

Mi HTML es la siguiente:

<div id="buttons">
        <ul>
            <li class="group">Group 1
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
            <li class="group">Group 2
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
            <li class="group">Group 3
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
            <li class="group">Group 4
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
        </ul>
</div>

Supongo que se ve muy simple y no hay nada malo con eso supongo.Son sólo listas anidadas dentro de las listas.

Pero entonces mi código jQuery.Se parece a esto:

$(".group").click(function(event) {

    // if ($(event.target).is('ul li ul li')) return false;

    $(".group").children("ul").animate({top: 0, opacity: 0}, 200);
    var liHeight = ($(this).children("ul").children("li").height())+20;
    var totalOptions = $(this).children("ul").children("li").length;
    var combinedHeight = totalOptions * liHeight;
    var slideIn = -(16+combinedHeight) // formula doing math on slidedistance
    $(this).children("ul").animate({
                            top: slideIn,
                            opacity: 1
                        }, 600);

    /*
    $(".link").click(function(event) {
        event.stopPropagation();
    });
    */

});

Lo que realmente hace es:

1. restablecer el grupo de niños defecto posición superior
2. conseguir el clic del grupo
3. obtener la altura total del niño ul del grupo objetivo
4. la preparación de la distancia para la animación
5. la cocción de la animación

No hay ningún problema viene junto con eso y todo funciona como quiere, pero cuando hago clic en el lis dentro de la uls, sólo se mantiene la cocción de la animación, y que no es parte del plan.

Me comentó 2 bloques de código como te habrás dado cuenta.Que son de 2 diferentes maneras para controlar la propagación de la que he encontrado al tropiezo en internet por un problema relativo con la respuesta.Ambos no dan buen resultado aunque.Lo que pasa es que la propagación se detiene, sino que lo hace también incapaz haga clic en los diferentes grupos.

Ese es el problema en una cáscara de nuez.Creo que sólo se necesita tener una o dos líneas para agregar, pero simplemente no puedo pensar en lo que debe de encajar, casi intentado todo lo que vino a mi mente.

También, si usted no puede encontrar todas las respuestas, pero tiene algunos comentarios sobre el código de marcado o algo, también es bienvenido (yo soy un estudiante en la interacción de diseño / desarrollo web, por lo que le agradecería que también :))

Answer 1

Usted no debe instalar el controlador de clic en el .group elemento, pero sólo en la alternancia del elemento.

<li class="group">
    <a class="toggle">Group 2</a>
    <ul>
        <!-- contents to show & hide -->
    </ul>
</li>

$(".toggle").click(function(e) {
    $(this).next()... // to reference the ul
})

Answer 2

Sólo tienes que desplazar el siguiente código fuera de la .group haga clic en controlador:

$(".link").click(function(event) {
    event.stopPropagation();
});

Código completo:

$(".group").click(function(event) {

    // if ($(event.target).is('ul li ul li')) return false;

    $(".group").children("ul").animate({top: 0, opacity: 0}, 200);
    var liHeight = ($(this).children("ul").children("li").height())+20;
    var totalOptions = $(this).children("ul").children("li").length;
    var combinedHeight = totalOptions * liHeight;
    var slideIn = -(16+combinedHeight) // formula doing math on slidedistance
    $(this).children("ul").animate({
                            top: slideIn,
                            opacity: 1
                        }, 600);
});


$(".link").click(function(event) {
   event.stopPropagation();
});

Answer 3

Me gustaría sugerir una forma alternativa de la click oyente.Si utiliza el on método en jQuery - puede delegar el oyente del elemento secundario.Así:

$('#buttons').on('click', 'li', function(e){
    var li = $(this);

    if(li.hasClass('group')){
        alert('group was clicked');
    }
    else if(li.hasClass('link')){
        alert('link was clicked');
        e.stopPropagation();
    }
});

Un ejemplo vivo de este código es de aquí - http://jsfiddle.net/skip405/YWzxB/

Aviso:si se elimina el stopPropagation parte de la link delegación - verás dos las alertas.En primer lugar - para el link y luego - para el group.