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

Question

我遇到以下問題。 我在我的網站上實現了一個嵌套的手風琴Menu JQuery腳本。 我現在需要做的是手風琴菜單子類別基於URL展開。

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

您會發現我將菜單項“ Test_2”設置在“子類別1.2”中。 當用戶輸入相應的URL，即“ / myurl / Test_2”時，默認情況下，手風琴菜單應打開“ Sub Category 1.2”項。

我不是JQuery程序員，我不知道如何在JQuery中做到這一點。 我的菜鳥考慮因素是：-如果我在菜單中找到一個活動元素，則“單擊”相應的元素，應將其展開

在此先感謝您，伯尼（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

如果打算將其用作菜單，則可以將所有內容構建在內部包含列表元素的無序列表中。 任何嵌套菜單都可以這樣完成：

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

通過這種方式，您可以定位到瀏覽器內置的：active列表項。 然后，您可以使用css和jquery使下拉菜單變魔術。 在jquery中，您可以將：active錨定為目標：

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

如果您對此不感興趣，請查看其他堆棧溢出答案，這可能也有幫助。

jQuery-確定單擊了哪個鏈接

干杯

Answer 2

好的，我解決了我的Prolbem。 在我用來構造Template的Django代碼中，我給hasActive或hasPassive一個特定的類，該類指的是菜單項，其中的菜單項內部具有主動或僅被動元素（不會根據URL單擊的元素）。 如果有人遇到同樣的問題，請提供更多信息。