根据一个子jquery分别隐藏下拉菜单

Question

So I've painfully got multiple drop-downs toggling states(hidden and shown) in JQuery but I have some code which tells the side bar which page is active and gives it the style active and I would like a drop down to not be hidden if there is a child active in it.

The top level link which you click to view the drop-down gets given the id "HAC"(has active child) if it has an active child but I think I might be burning my brain out on this.

Here's a jsfiddle page with the working demo of the problem.

the drop down is set out like this in a nav

<ul id="HAC" class='topLevel'>                
   <li class='subItem'>
       <a class="active" href='thatpage.php'>That page</a>
   </li>
   <li class='subItem'>
       <a href='thatotherpage.php'>That other page</a>
   </li>
</ul>

thanks in advance for any help

Answer 1

I think what you are looking for is the jQuery :not selector . Here is an update to your fiddle

function dropDowns() {
    //for each toplevel li a
    $(".topLevel:not(#HAC) li a").each(function() {
        //hide subitems if not HAC (has active children)
            $(this).hide();
    });
    //Toggle show them on click
    clickToggle();
}