Question

我遇到以下问题。我在我的网站上实现了一个嵌套的手风琴Menu JQuery脚本。我现在需要做的是手风琴菜单子类别根据URL进行扩展。

您会发现我在“子类别1.2”中将菜单项“Test_2”设置为活动状态。当用户输入相应的URL，即“/ myurl / Test_2”时，手风琴菜单应默认打开“子类别1.2”项。

我不是JQuery程序员，我不知道如何在JQuery中执行此操作。我的noob考虑是这样的： - 如果我在菜单中找到一个活动元素，我“点击”应该展开它的相应元素

提前致谢，最好的问候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>

以这种方式执行此操作将允许您定位使用浏览器内置的：活动列表项。然后你可以使用css和jquery来制作下拉魔法。在jquery中，您可以将：active锚定为：

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

如果您对此不感兴趣，请查看可能有帮助的其他堆栈溢出答案。

Jquery - determining which link was clicked

干杯

Answer 2

好的，我解决了我的Prolbem。在我用来构建模板的Django代码中，我给了一个特定的类到hasActive或hasPassive，它指的是里面有活动或只有被动元素的菜单项（没有根据网址点击的元素）。如果有人有同样的问题，我就会提供更多信息。

JQuery按网址

2 个答案: