JQuery通過URL擴展嵌套式手風琴菜單

Question

我遇到以下問題。 我在我的網站上實現了嵌套的accordion Menu JQuery腳本。 我現在需要做的是手風琴菜單子類根據URL進行擴展。

這裏是小提琴https://jsfiddle.net/w6fa87ov/

你會發現，我主動設置菜單項「Test_2」，「子類別1.2」中。 當用戶輸入相應的URL即「/ myurl/Test_2」時，Accordion菜單默認應打開「Sub Category 1.2」項。

Iam不是JQuery程序員，我不知道如何在JQuery中做到這一點。 我小白的考慮是這樣的： - 如果我發現菜單內的有源元件我「點擊」，它應該擴大它

在此先感謝，最好的問候伯尼

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

好吧，我解決我的Prolbem。 在我用來構造模板的Django代碼中，我給了hasActive或hasPassive的一個特定類，它指向內部具有活動或唯一被動元素的菜單項（不是基於url單擊的元素）。 如果有人遇到同樣的問題，請提供更多信息。

Answer 2

如果這樣做的目的，你可以在裏面列表元素的無序列表構建所有的菜單。任何嵌套菜單可以做到這樣：

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

這樣做，這樣可以讓你的目標：即建立在與瀏覽器活動列表項。然後你可以使用CSS和jQuery來製作下拉魔術。 jQuery中可以定位的：主動錨這樣：

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

如果你不感興趣，看看這個其他堆棧溢出的答案可能是很好的幫助。

Jquery - determining which link was clicked

乾杯