sub nav not directing to page (jquery)

Question

Hi,

I have basic markup for a drop down nav, nested lists.

The user will click on the top nav item, which will open up the sub nav, but my sub nav links aren't working.

It is in a CMS so I must have the links for the placeholder pages there.

Markup:

<ul class="navtop">
<li><a href="">Who</a>
  <ul>
     <li><a href="">Sub Item 1</a></li>
     <li><a href="">Sub Item 2</a></li>
     <li><a href="">Long Sub Item 3</a></li>
     <li><a href="">Sub Item 4</a></li>
  </ul>
</li>
<li><a href="">What</a>
  <ul>
     <li><a href="">Sub Item 1</a></li>
     <li><a href="">Sub Item 2</a></li>
     <li><a href="">Long Sub Item 3</a></li>
     <li><a href="">Sub Item 4</a></li>
  </ul>
</li>
</ul>

Javascript:

$(".navtop li").click(function(){
 $(this).toggleClass("show");  
 $(this).siblings(".show").toggleClass("show");
 return false;
});

css:

#headernav .navtop li.show ul
{
display: block;
}

I tried adding a 'return true' for $(".navtop li ul li a") but it didn't work. Suggestions?

Answer 1

Why are you return false to the LI click? I believe that's the problem.

If you take that out, everything should work fine.

If that doesn't work, bear in mind you're attaching the click event to every LI instead of just the top level LIs. Try this instead:

$(".navtop > li").click(function(){
        $(this).toggleClass("show");            
        $(this).siblings(".show").toggleClass("show");
});

Answer 2

Turns out this worked:

$(".navtop > li > a").click(function(){
 $(this).parent('li').toggleClass("show");  
 $(this).parent('li').siblings(".show").toggleClass("show");
 return false;
});