Jquery - Wie fügt man dem gesamten Navigationsmenüpfad eine aktive Klasse hinzu?

Question

Ich habe ein Menü mit 3 Ebenen, und ich möchte eine Klasse für die erste aktive li und eine zweite Klasse für alle anderen nachfolgenden li verwenden. Wenn ich auf eine Auswahl klicke, bleibt der Level 3 aktiv (Level 1, Level 2, Level 3). Wenn ich 2 auf einer Auswahl auf Ebene klicken, um aktiv zu bleiben bis zu Stufe 2.

Ich habe folgendes:

$(document).ready(function(){ 
    $('.sf-menu li a').each(function(index) { 
     if((this.pathname.trim() == window.location.pathname)) 
      $(this).parent().addClass("selected"); 
       var next_li = $(this).parent().next(); 
      $('a', next_li).addClass("selected2"); 
    }); 
}); 

Answer 1

Ich denke, dass ich es dieses Mal bekam, es ist ein bisschen schmutzig, aber es funktioniert.

Fügen Sie zuerst Klassen hinzu, damit Sie die Elemente <li> der ersten, zweiten und dritten Ebene identifizieren können. Tun Sie es in dem foreach, oder was auch immer bucle, die das Menü macht (oder von Hand, wenn es keine solche bucle ist):

<ul id="navlist" > 
    <li id="home" class="firstLevel"> 
    <a class="nav" href="home">Home</a> 
    <ul class="secondLevel"> 
     <li class="secondLevel"> 
      <a class="nav2" href="home">sub-Home1</a> 
      <ul> 
       <li class="thirdLevel"><a class="nav3" href="home">sub-sub-Home1></a></li> 
       <li class="thirdLevel"><a class="nav3" href="home">sub-sub-Home1></a></li> 
      </ul> 
     </li> 
     <li><a class="nav2" href="home">sub-Home2</a></li> 
    </ul> 
    </li> 

    <li id="about" class="firstLevel"> 
    <a class="nav" href="about-us">About Us</a> 
    </li> 
</ul> 

closest jQuery Dann. Er durchquert den DOM-Baum und stimmt mit dem nächsten Punkt, können Sie einen Selektor übergeben (die Firstlevel oder Second Klassen, die wir gerade erstellt):

$('#navlist a').on('click', function (e) { 
      e.preventDefault(); //prevent the link from being followed 
      $('#navlist a').removeClass('selected'); 
      $('#navlist a').removeClass('selected2'); 
      $(this).closest('.secondLevel').children('a').addClass('selected2'); 
      $(this).closest('.firstLevel').children('a').addClass('selected2'); 
      $(this).addClass('selected'); 
     }); 

Dann fügen Sie !important zum ausgewählt Klasse (also wenn es eine Kollision wie in der Über uns Link ausgewählt ist die Klasse, die angewendet wird). Das ist der dreckigste Teil.

Eine Arbeits Geige: https://jsfiddle.net/4r5vg/661/