Question

(sorry but the code snippet is not working over here)

<ul>  
  <li><a href="#" title="" class="active">d</a>  
    <ul>  
      <li><a href="#" title="">d</a></li>  
      <li><a href="#" title="">d</a></li>  
    </ul>  
  </li>  
  ...  
</ul>  

$('#menu > ul > li ul').click(function (e) {  
   e.stopPropagation();  
}).not(this.parent().find('a.active')).hide();  

Take a look at the .not() statement. I’m trying to get the child UL shown when the sibling a from the parent li has the class active. I’ve tried numerous ways (siblings, parent, find, hasclass, ..) but none of them is working. Probably because i’m not using the selectors in the right way..

Thanks!

Answer 1

you can do it with pure css:

.active + ul {
   display: block;
}
a + ul {
   display: none;
}

but if you want jQuery, then:

$('#menu > ul > li ul').click(function (e) {  
   e.stopPropagation();  
}).hide();
$('#menu > ul > li').has('.active').find('ul').show();

is a better option