jQuery Propagação e várias classes

Question

-- ATUALIZAÇÃO --

Eu era um pouco estúpido, a criança UL estavam cobrindo a lista principal (opacidade php), então eu não conseguia clique em grupos de depois que eu cliquei-los de uma vez.Ops!De qualquer maneira, obrigado por ajudar-me, rapazes!

---

O problema com jQuery propagação é algo que todo mundo está lutando com.Mas aqui é o meu caso, que eu possa encontrar nada para corrigir (ou talvez eu sou burra para não olhar para o lugar certo, ou vc habilidades não são apenas bons o suficiente para entender).

O caso base é que eu tenho alguns grupos, e os grupos existem várias opções.quando você clica em um dos grupos, as opções pop-up.MAS, quando eu clique em uma das opções a todo aparecendo atividade é acionado novamente, porque são filhos do pai e, assim, ele reconhece a sala de aula, onde as crianças são presa em.

Meu HTML de procura da seguinte forma:

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

Eu acho que parece muito simples e não existe nada de errado com o que eu suponho.Isso são apenas listas aninhadas dentro de listas.

Mas então o meu código jQuery.Ele se parece com isso:

$(".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();
    });
    */

});

O que ele realmente faz é:

1. repor o grupo de crianças para padrão superior posição
2. chegando a clicado grupo
3. chegando a altura do total de criança ul do grupo-alvo
4. preparando a distância para a animação
5. disparar a animação

Não há nenhum problema, que vem junto com isso, e tudo funciona como eu quer, mas quando eu clicar no lis, dentro do uls, ele simplesmente continua disparando a animação, e que não é parte do plano.

Eu comentou 2 blocos de código como você pode ter notado.São 2 formas diferentes para controlar a propagação eu achei enquanto tropeço da internet para um problema relativo com a resposta.Ambos não dão bom resultado, porém.O que acontece é que a propagação, na verdade, pára, mas também a torna incapaz clique em grupos diferentes.

Esse é o problema em poucas palavras.Eu acho que eu só preciso para ter uma ou duas linhas para adicionar, mas eu simplesmente não consigo pensar no que deve caber, quase tentei de tudo que veio a minha mente.

Também, se você não pode encontrar nenhuma resposta, mas tenho alguns comentários sobre o código de marcação ou algo assim, é também bem-vindo (eu sou um estudante em design de interação / desenvolvimento web, então eu gostaria que demais :))

Answer 1

Você não deve instalar o manipulador de clique no .group item, mas apenas sobre a alternância 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

Basta mover o código a seguir fora da .group manipulador de clique:

$(".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

Eu sugiro uma forma alternativa de click ouvinte.Se você usar o on método jQuery - você pode delegar o ouvinte para o elemento filho.Assim:

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

Um exemplo vivo deste código é aqui - http://jsfiddle.net/skip405/YWzxB/

Aviso:se você excluir o stopPropagation parte no link delegação - você vai ver dois alertas.Primeiro - para a link e, em seguida, para o group.