I am making a nested ul slide down when it's parent is clicked on for a clients navigation, so the parent link is deactivated with return false. But the return false is deactivating the child links too, how can I avoid this?
$("li.page_item a:first-child").click(function() {
//select it's direct sub ul
var subnav = $(this).next();
//other subnavs
var navsibling = $(this).parent().siblings('li').children('ul');
//hide siblings subnav
if (navsibling.is(":open")) {
navsibling.slideUp("slow");
}
// check to see if sub is hidden, open if it is, close if it isn't
if (subnav.is(":hidden")) {
subnav.slideDown("slow");
} else {
subnav.slideUp("slow");
}
// stop the top level link from linking
return false;
});
I thought using a:first-child would only apply the return false to that specific a and not any of it's sibling's children... suggestions?
Edit: It is a list pages widget in wordpress, basically the markup is this:
<ul>
<li class="page_item"><a href="">Link</a>
<ul>
<li><a href="">SubLink</a></li>
<li><a href="">SubLink</a></li>
<li><a href="">SubLink</a></li>
<li><a href="">SubLink</a></li>
</ul>
</li>
<li class="page_item"><a href="">Link</a>
<ul>
<li><a href="">SubLink</a></li>
<li><a href="">SubLink</a></li>
<li><a href="">SubLink</a></li>
<li><a href="">SubLink</a></li>
</ul>
</li>
</ul>