jQuery erstes Element des Typs klicken

Question

Ich arbeite durch ein Problem, wo ich ein Menü habe, das mehrere Ebenen tief ist. Ich versuche es so zu bekommen, dass wenn ein Element der ersten Ebene angeklickt wird (add class .ubermenu-active), es nach einem anderen Element der ersten Ebene mit dieser Klasse sucht und es entfernt.

$('.ubermenu-item-level-0 span').on('click',function() { 
    var target = $('.ubermenu-item-level-0'); 
    $('.ubermenu li.ubermenu-item-level-0').removeClass('ubermenu-active'); 
    target.parents('.ubermenu li.ubermenu-item-level-0').toggleClass('ubermenu-active'); 
}); 

HTML (mock):

<ul class="ubermenu"> 
    <li class="ubermenu-item-level-0"> 
     <a class="ubermenu-target"> 
      <span class="ubermenu-target-title">Level 1</span> 
     </a> 
     <ul class="ubermenu-submenu"> 
      <li class="ubermenu-item-level-1"> 
       <a class="ubermenu-target"> 
        <span class="ubermenu-target-title">Level 2</span> 
       </a> 
      </li> 
      <li class="ubermenu-item-level-1"> 
       <a class="ubermenu-target"> 
        <span class="ubermenu-target-title">Level 2</span> 
       </a> 
       <ul class="ubermenu-submenu"> 
        <li class="ubermenu-item-level-2"> 
         <a class="ubermenu-target"> 
          <span class="ubermenu-target-title">Level 3</span> 
         </a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     <li class="ubermenu-item-level-0"> 
      <a class="ubermenu-target"> 
       <span class="ubermenu-target-title">Level 1</span> 
      </a> 
     </li> 
    </li> 
</ul> 

Gerade jetzt, wenn eine der Teilelemente sind die Eltern angeklickt schließt

Answer 1

Also, Ihre Beispiel-HTML ist nicht das, was ich erwartet habe zu sehen. . . Genauer gesagt, Ihr zweites <li class="ubermenu-item-level-0" . . . Element wird derzeit als Kind unter dem ersten angezeigt, während Ihre Beschreibung es so klingen lässt, als ob sie Geschwister wären.

Um der Lösung willen gehe ich davon aus, dass diese zwei li s Geschwister von einander sein sollen und dass irgendwie der Code durcheinander geraten ist. :)

Also, hier ist, wie ich damit umgehen würde. . .

Grundsätzlich habe ich Ihre Logik vereinfacht und ein kleines Problem, das Sie in Ihrem jQuery-Code hatten, behoben.

---

Detaillierte Erläuterung

Das Problem war, dass, wenn Sie $('.ubermenu-item-level-0 span') als Selektor für Ihr Änderungsereignis verwendet. Das bedeutet "irgendein span Element, das ein Nachkomme eines ubermenu-item-level-0 Elements ist". Also, zusätzlich zu den Spannweiten, die direkt unter den ubermenu-item-level-0 Listenelementen sind, nahm es auch diejenigen unter den ubermenu-item-level-1 und ubermenu-item-level-2 Elementen auf, da sie auch Nachkommen sind.

So änderte ich Ihre Wähler auf $firstLevelMenuOptions.children("a").children("span") was übersetzt „alle span s, die direkte Kinder eines a sind, dh die direkte Kind eines ubermenu-item-level-0 Element“ (Hinweis: $firstLevelMenuOptions ist gleich $(".ubermenu").find(".ubermenu-active"); durch die eingestellte Logik früher im Code). Dies hält den Selektor davon ab, die untere Ebene spans aufzunehmen.

Abgesehen davon und einige Ihrer Selektoren effizienter zu trimmen, die einzige andere Sache, die ich änderte, war der Ablauf der ubermenu-active Klasse manipuliert.In meiner Lösung gibt es zwei Schritte:

1. entfernen ubermenu-active von ALLEubermenu-item-level-0 Elemente
2. hinzufügen ubermenu-active zur nächsten ubermenu-item-level-0 Element zum span die geklickt wurde (dh $(this))

Das setzt im Grunde die Liste zurück und wählt dann den entsprechenden Menüpunkt wieder für mich aktiv.

Answer 2

Sie können das Ereignis Ausbreitung stoppen:

event.stopPropagation() 

Answer 3

Ohne den vollen HTML-Code zu sehen, würde ich vorschlagen, dies zu versuchen:

$('.ubermenu-item-level-0 span').on('click',function(e) { 
     e.stopPropagation(); 
     var target = $('.ubermenu-item-level-0'); 
     $('.ubermenu li.ubermenu-item-level-0').removeClass('ubermenu-active'); 
     target.parents('.ubermenu li.ubermenu-item-level-0').toggleClass('ubermenu-active'); 
    }); 

Answer 4

Derzeit wählt Ihre target Var alle Elemente mit der Klasse .ubermenu-item-level-0 aus. Wenn Sie also die Klasse umschalten, schalten Sie alle übergeordneten Elemente um. Ihre Zielvariable sollte etwas relativ zu dem angeklickten Element sein, wie var target = $(this).closest('.ubermenu-item-level-0');