jQuery Propagazione e di più classi
-
13-12-2019 - |
Domanda
-- 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 è:
- reimpostazione del gruppo di bambini di default prima posizione
- ottenere cliccato gruppo
- raggiungere l'altezza del totale del bambino ul del gruppo target
- preparare la distanza per l'animazione
- la cottura l'animazione
Non c'è nessun problema a venire con che e tutto funziona come mi vogliono, ma quando clicco sul li
s all'interno del ul
s, 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 :))
Soluzione
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
})
Altri suggerimenti
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();
});
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
.