jQuery-Propagierung und mehrere Klassen

Question

-- AKTUALISIEREN --

Ich war ein bisschen dumm, die untergeordneten ULs verdeckten die übergeordnete Liste (Deckkraft-Ausblendung), sodass ich nicht auf die Gruppen klicken konnte, nachdem ich sie einmal angeklickt hatte.Hoppla!Trotzdem danke, dass ihr mir geholfen habt, Jungs!

---

Das Problem mit der jQuery-Verbreitung ist etwas, mit dem jeder ringt.Aber hier ist mein Fall, den ich nirgendwo beheben kann (oder vielleicht bin ich dumm, nicht an den richtigen Stellen zu suchen, oder meine jQuery-Kenntnisse sind einfach nicht gut genug, um es zu verstehen).

Der Grundfall ist, dass ich einige Gruppen habe und in den Gruppen gibt es mehrere Optionen.Wenn Sie auf eine der Gruppen klicken, werden die Optionen angezeigt.ABER wenn ich auf eine der Optionen klicke, wird die gesamte Popup-Aktivität erneut ausgelöst, da es sich um die Kinder des Elternteils handelt und dieser die Klasse erkennt, in der die Kinder gefangen sind.

Mein HTML sieht wie folgt aus:

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

Ich denke, das sieht ganz einfach aus und daran ist meiner Meinung nach nichts auszusetzen.Es handelt sich lediglich um Listen, die in Listen verschachtelt sind.

Aber dann mein jQuery-Code.Es sieht aus wie das:

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

});

Was es tatsächlich tut, ist:

1. Zurücksetzen der Gruppenkinder auf die standardmäßige oberste Position
2. Abrufen der angeklickten Gruppe
3. Ermitteln der Größe der gesamten Kinder-UL der Zielgruppe
4. Vorbereitung der Distanz für die Animation
5. Auslösen der Animation

Es gibt kein Problem damit und alles funktioniert wie ich es möchte, aber wenn ich auf klicke lis innerhalb der uls, es feuert die Animation einfach weiter ab, und das ist nicht Teil des Plans.

Wie Sie vielleicht bemerkt haben, habe ich zwei Codeblöcke auskommentiert.Das sind zwei verschiedene Möglichkeiten, die Ausbreitung zu kontrollieren, die ich gefunden habe, als ich im Internet nach einem relativen Problem mit der Antwort gesucht habe.Beide liefern jedoch kein gutes Ergebnis.Was passiert, ist, dass die Ausbreitung tatsächlich stoppt, es aber auch nicht mehr möglich ist, auf andere Gruppen zu klicken.

Das ist auf den Punkt gebracht das Problem.Ich denke, ich muss nur noch ein oder zwei Zeilen hinzufügen, aber mir fällt einfach nicht ein, was passen sollte, ich habe fast alles ausprobiert, was mir in den Sinn kam.

Auch wenn Sie keine Antworten finden, aber Feedback zum Code-Markup oder Ähnlichem haben, ist das ebenfalls willkommen (ich studiere Interaktionsdesign/Webentwicklung, daher würde ich mich auch darüber freuen :))

Answer 1

Sie sollten den Click-Handler nicht auf dem installieren .group Element, aber nur auf dem Toggle-Element.

<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

Verschieben Sie einfach den folgenden Code außerhalb von .group Click-Handler:

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

Vollständiger Code:

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

Ich würde einen alternativen Weg vorschlagen click Hörer.Wenn Sie die verwenden on Methode in jQuery – Sie können den Listener an das untergeordnete Element delegieren.Etwa so:

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

Ein Live-Beispiel dieses Codes finden Sie hier - http://jsfiddle.net/skip405/YWzxB/

Beachten:wenn Sie die löschen stopPropagation Teil auf der link Delegation - Sie werden sehen zwei Warnungen.Erstens - für die link und dann - für die group.