JQuery Erweitern Nested Akkordeon Menü nach URL

Question

Ich habe das folgende Problem. Ich habe ein verschachteltes Menu-JQuery-Skript auf meiner Website implementiert. Was ich jetzt tun muss, ist, dass die Unterkategorien des Akkordeon-Menüs basierend auf einer URL erweitert werden.

Hier ist die Geige https://jsfiddle.net/w6fa87ov/

Sie werden feststellen, dass ich den Menüpunkt „test_2“ innerhalb „Sub-Kategorie 1.2“ auf aktiv gesetzt. Wenn der Benutzer die entsprechende URL eingibt, z. B. "/ myurl/Test_2", sollte das Akkordeon-Menü standardmäßig den Eintrag "Unterkategorie 1.2" öffnen.

Ich bin kein JQuery-Programmierer und ich weiß nicht, wie man das in JQuery macht. Meine Noob Überlegung war so etwas wie: - Wenn ich ein aktives Element innerhalb des Menüs finden i „klicken“, um das entsprechende Element, das es

Vielen Dank im Voraus erweitern sollte, mit besten Grüßen Burnie

HTML:

<div id="main"> 
<div id="nestedAccordion"> 
     <h5 id="id_element_TopKat_Food">First Top Category</h5> 
     <div id="container2"> 
      <h6 id="id_element_Sub1Kat">Sub Category 1.1</h6> 
      <div id="container3"> 
        <a class="accordionSubKategorie" href="/myurl/Test_0" style="text-decoration:none;"> 
         <h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_0</h7> 
        </a> 
      </div> 

      <h6 id="id_element_Sub1Kat">Sub Category 1.2</h6> 
      <div id="container3"> 
       <a class="accordionSubKategorie" href="/myurl/Test_1" style="text-decoration:none;"> 
        <h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_1</h7> 
       </a> 
       <a class="accordionSubKategorie" href="/myurl/Test_2" style="text-decoration:none;"> 
        <h7 id="id_element_Sub2Kat" class="Sub2Kat active"> Test_2</h7> 
       </a> 
       <a class="accordionSubKategorie" href="/myurl/Test_3" style="text-decoration:none;">  
        <h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_4</h7> 
       </a> 
      </div> 
     </div> 

     <h5 id="id_element_TopKat_Non-Food">Second Top Category</h5> 
     <div id="container2"> 
      <h6 id="id_element_Sub1Kat">Sub Category 2.1</h6> 
      <div id="container3"> 
       <a class="accordionSubKategorie" href="/myurl/Test_4" style="text-decoration:none;"> 
         <h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_4</h7> 
       </a> 
      </div>  
     </div> 
</div> 

JQuery:

var parentDivs = $('#nestedAccordion div'); 
    var childDivs = $('#nestedAccordion h6').siblings('div'); 

    $('#nestedAccordion h5').click(function() { 
    parentDivs.slideUp(); 
    if ($(this).next().is(':hidden')) { 
     $(this).next().slideDown(); 
    } else { 
     $(this).next().slideUp(); 
    } 
    }); 

    childDivs.slideUp(); 
    $('#nestedAccordion h6').click(function() { 
    childDivs.slideUp(); 
    if ($(this).next().is(':hidden')) { 
     $(this).next().slideDown(); 
    } else { 
     $(this).next().slideUp(); 
    } 
    }); 

CSS:

h5 { 
    margin-bottom: 8px; 
    font-weight:bold; 
    font-size: 20px; 
    width: 100%; 
    display: block; 
    background: #6EB90A; 
    color: #fefefe; 
    padding: .75em; 
    border-radius: 0.15em; 
    cursor: pointer; 
    cursor: hand; 
} 

h5:hover { 
    background: #5c8a1c; 
    text-decoration: none; 
    color: white; 
} 

h6 { 
    margin-top:-3px; 
    font-size: 15px; 
    width: 100%; 
    display: block; 
    background: #FFFFFF; 
    border-color: #476767; 
    box-shadow: 0px 0px 0px 2px rgba(71,103,103,1); 
    color: #476767; 
    padding: .25em; 
    border-radius: 0.8em; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    cursor: pointer; 
    cursor: hand; 
} 

h6:hover { 
    background: #476767; 
    text-decoration: none; 
    color: white; 
} 

h7.Sub2Kat { 

    font-size: 15px; 
    width: 100%; 
    display: block; 
    color: #476767; 
    padding-top: 2px; 
    padding-bottom: .1em; 
    padding-left: 1.8em; 
    border-radius: 0.2em; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    cursor: pointer; 
    cursor: hand; 
} 

h7.Sub2Kat:hover { 
    background: #6EB90A; 
    color: white; 
} 

h7.Sub2Kat.active { 
    border: 2px solid #ddd; 
    border-radius: 0.8em; 
    padding-left: 1.2em; 
} 

.Sub2Katactive { 
    font-size:0.9em; 
} 

h7.Sub2Kat.active { 
    border: 2px solid #ddd; 
    border-radius: 0.8em; 
    padding-left: 1.2em; 
} 

Answer 1

Ok gelöst i mein Prolbem. Innerhalb meines Django-Codes, den ich zum Erstellen der Vorlage verwende, gebe ich eine spezifische Klasse für hasActive oder hasPassive, die auf die Menüelemente verweist, die aktive oder nur passive Elemente enthalten (Elemente, die nicht basierend auf der URL angeklickt werden). Falls jemand das gleiche Problem hat, finden Sie weitere Informationen dazu.

Answer 2

Wenn dies als ein Menü sollen Sie alles in einer ungeordneten Liste mit Listenelementen innerhalb bauen konnten. Alle verschachtelten Menüs können als solche durchgeführt werden:

<ul class="menu"> 
 
    <li class="menuItem"> 
 
     <a href="#">Page 1</a> 
 
     <ul class="subMenu"> 
 
     <li class="menuItem2"><a href="#">Sub Page 1</a></li> 
 
     <li class="menuItem2"><a href="#">Sub Page 2</a></li> 
 
     <li class="menuItem2"><a href="#">Sub Page 3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="menuItem"><a href="#">Page 2</a></li> 
 
    <li class="menuItem"><a href="#">Page 3</a></li> 
 
    </ul>

es diese Art und Weise können Sie das Ziel: aktive Listenposition, die mit Browsern eingebaut ist. Dann könnten Sie css und jquery verwenden, um die Dropdown-Magie zu erstellen. aktiv Anker als solche: In jquery können Sie das Ziel

$('menu > li a:active').doSomething();

Wenn dies nicht interessiert, lesen Sie in diesem anderen Stack-Überlauf Antwort, die auch von Hilfe sein kann.

Jquery - determining which link was clicked

Prost