jQuery Propagation et de multiples classes

Question

-- UPDATE --

J'ai été un peu stupide, l'enfant UL couvraient la liste parent (l'opacité fadeout), donc je ne pouvais pas cliquer sur les groupes après que j'ai cliqué une seule fois.Oups!En tout cas merci pour m'avoir aidé les gars!

---

Le problème avec jQuery propagation est quelque chose que tout le monde est aux prises avec des.Mais ici, c'est mon cas, que je peux trouver nulle part de fixer (ou peut-être que je suis stupide de ne pas regarder aux bons endroits ou mon jQuery compétences ne sont tout simplement pas assez bon pour comprendre).

Le cas de base est que j'ai des groupes et dans les groupes, il y a plusieurs options.lorsque vous cliquez sur l'un des groupes, les options apparaîtra.MAIS, lorsque je clique sur une des options de l'ensemble de popping up de l'activité des feux de nouveau, parce que ce sont les enfants de la mère, et donc, il reconnaît la classe où les enfants sont attrapés dans.

Mon code HTML se présente comme suit:

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

Je pense que semble assez simple et rien de mal à cela, je suppose.Ce sont juste des listes imbriquées à l'intérieur des listes.

Mais alors mon code jQuery.Il ressemble à ceci:

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

});

Ce qu'il fait réellement est:

1. la réinitialisation du groupe, les enfants à défaut de la position supérieure
2. obtenir les cliqué groupe
3. l'obtention de la hauteur du nombre d'enfants ul du groupe cible
4. la préparation de la distance pour l'animation
5. le tir de l'animation

Il n'y a pas de problème à venir le long et tout fonctionne comme je le souhaite, mais quand je clique sur le lis au sein de la uls, il ne cesse de tir à l'animation, et qui ne fait pas partie du plan.

J'ai commenté 2 blocs de code que vous l'ayez remarqué.Qui sont 2 façons différentes pour le contrôle de la propagation j'ai trouvé tout en trébuchant sur internet pour un problème relatif à la réponse.Les deux donnent pas de bons résultats si.Ce qui se passe est que la propagation s'arrête, mais il est également impossible de cliquer sur les différents groupes.

C'est le problème en un mot.Je pense que j'ai juste besoin d'avoir une ou deux lignes à ajouter, mais je ne peux pas penser à ce qui doit s'adapter, presque essayé tout ce qui est venu à mon esprit.

Aussi, si vous ne trouvez pas toutes les réponses, mais certains ont des commentaires sur le code de balisage ou de quelque chose, c'est aussi la bienvenue (je suis un étudiant en design d'interaction / développement web, donc j'apprécierais que trop :))

Answer 1

Vous ne devez pas installer le gestionnaire de clic sur le .group élément, mais seulement sur la bascule de l'élément.

<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

Il suffit de déplacer le code suivant à l'extérieur de la .group cliquez sur gestionnaire de:

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

Code complet:

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

Je vous suggère une autre façon de le click auditeur.Si vous utilisez le on méthode dans jQuery - vous pouvez déléguer l'auditeur à l'élément enfant.Comme suit:

$('#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 exemple vivant de ce code est ici - http://jsfiddle.net/skip405/YWzxB/

Avis:si vous supprimez le stopPropagation la partie sur le link délégation - vous verrez deux les alertes.D'abord - pour la link et puis pour le group.