CODEWITHSUNDEEP
jquerydrop-down-menumulti-level
Popoy
Popoy

Reputation: 15

3 level menu child link

I have a simple code I saw in StackOverflow. This works great, but the problem I encounter is child links doesn't seem to work It doesn't go to the URL it is assigned to.

Here is my HTML:

<ul class="menu">

<li><a href="#">First Link</a>   
  <ul class="depth2">
    <li><a href="http://www.google.com">Go to Google</a></li>
    <li><a href="http://www.yahoo.com">Go to Yahoo</a></li>
  </ul> 
</li>

</ul>

And here is the jQuery:

<script>
  (function($){ 
    $('.menu a').click(function( e ){
      e.preventDefault();
      $(this).parent('li').find('ul:first').slideToggle();    
    });
  })(jQuery);
</script>

I feel like a simple line of code is missing to make it work. Thank you very much for your time.

Upvotes: 1

Views: 55

Answers (1)

Casey Rule
Casey Rule

Reputation: 2085

e.preventDefault(); prevents the links from performing their default action, going to their assigned url. That's why your links are working. You can change you query to '.menu > li > a' to only select the top level of links.

<script>
    (function($){ 
    $('.menu > li > a').click(function( e ){
        e.preventDefault();
        $(this).parent('li').find('ul:first').slideToggle();    
    });
    })(jQuery);
</script>

Upvotes: 1

Related Questions