jQuery Propagazione e di più classi

Question

-- UPDATE --

Sono stato un po ' stupido, il bambino UL coprivano l'elenco padre (opacità fadeout), quindi non ho potuto fare clic su gruppi di dopo che ho cliccato una volta.Oops!Comunque grazie per l'aiuto ragazzi!

---

Il problema con jQuery propagazione è qualcosa che ognuno di noi è alle prese con.Ma qui è il mio caso che riesco a trovare nulla per risolvere (o forse sono io che sono scemo a non guardare al posto giusto, o mio jQuery abilità non sono buone abbastanza per capire).

L'ipotesi di base è che ho alcuni gruppi e nei gruppi ci sono diverse opzioni.quando si fa clic su uno dei gruppi, le opzioni pop-up.MA, quando faccio clic su una delle opzioni di tutta la spuntano attività spara di nuovo, perché sono figli del padre, e così si riconosce la classe in cui i bambini sono diagnosticati in.

Il mio HTML si presenta come segue:

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

Credo che sembra abbastanza semplice e non c'è nulla di male, suppongo.Sono solo liste nidificate all'interno di elenchi.

Ma poi il mio codice jQuery.Assomiglia a questo:

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

});

Che cosa realmente è:

1. reimpostazione del gruppo di bambini di default prima posizione
2. ottenere cliccato gruppo
3. raggiungere l'altezza del totale del bambino ul del gruppo target
4. preparare la distanza per l'animazione
5. la cottura l'animazione

Non c'è nessun problema a venire con che e tutto funziona come mi vogliono, ma quando clicco sul lis all'interno del uls, si continua la cottura l'animazione, e che non è parte del piano.

Ho commentato 2 blocchi di codice, come avrai notato.Sono 2 modi diversi per controllare la propagazione che ho trovato mentre inciampo internet per un parente problema con la risposta.Entrambi non danno un buon risultato, anche se.Quello che succede è che la propagazione in realtà si ferma, ma rende anche impossibile fare clic su gruppi diversi.

Che è il problema in un guscio di noce.Penso che ho solo bisogno di avere una o due linee da aggiungere, ma non riesco proprio a pensare a ciò che dovrebbe andare bene, quasi provato tutto ciò che mi è venuto in mente.

Inoltre, se non riesci a trovare risposte, ma hanno un feedback sul codice di markup o qualcosa del genere, è il benvenuto anche io sono uno studente in interaction design / sviluppo web, in modo da apprezzare anche questo :))

Answer 1

Si consiglia di non installare il gestore click sul .group item, ma solo sul toggle 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 spostare il codice riportato di seguito al di fuori della .group fare clic su gestore:

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

Codice 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

Vorrei suggerire un modo alternativo di click ascoltatore.Se si utilizza il on metodo in jQuery è possibile delegare l'ascoltatore in un elemento figlio.In questo modo:

$('#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 esempio di questo codice è qui - http://jsfiddle.net/skip405/YWzxB/

Avviso:se si elimina il stopPropagation parte sul link la delega e vedrai che due gli avvisi.Primo - per il link e poi - per la group.