jQuery dropdown menu links not working

Question

I have a jQuery dropdown menu but now my links aren't working:

 $(document).ready(function() { function visible($e) { if( $e.is(':visible') ) { return true; } else { return false; } } $('.nav .parent').find('ul').hide(); $(document).delegate('.parent', 'click', function() { var $this = $(this), $child = $this.children('ul'); if( visible( $child ) ) { $child.slideUp(); } else { $child.slideDown(); } return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="nav"> <ul> <li class="parent">Media <ul> <li class="parent">Videos <ul> <li class="child"><a href="#">Overview</a></li> <li class="child"><a href="#">Add</a></li> </ul> </li> <li class="parent">Music <ul> <li class="parent">Albums <ul> <li class="child"><a href="#">Overview</a></li> <li class="child"><a href="#">Add</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> 

I know the problem is return false; . But if I would delete that line the sliding isn't working properly. Because clicking on a sub menu item makes it close all the way to the main menu item. Which is what I don't want. So my question is, is there a simple way to make the links work while keeping return false ?

I know that by adding something like the following:

$(document).delegate('li.child a', 'click', function() {
        var $this = $(this),
            $url = $this.attr('href');

        window.location = $url;
    });

It will work but I would like to keep my js to a minimum.

Thanks in advance

Answer 1

The event bubbling is what is preventing your links to use the return false; What you need is: event.stopImmediatePropagation() :

Just add this piece of code to make it working:

$(".child a").off("click").click(function (e) {
  e.stopImmediatePropagation();
  return true;
});

Snippet:

 $(document).ready(function() { function visible($e) { if( $e.is(':visible') ) { return true; } else { return false; } } $('.nav .parent').find('ul').hide(); $(document).delegate('.parent', 'click', function() { var $this = $(this), $child = $this.children('ul'); if( visible( $child ) ) { $child.slideUp(); } else { $child.slideDown(); } return false; }); $(".child a").off("click").click(function (e) { e.stopImmediatePropagation(); return true; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="nav"> <ul> <li class="parent">Media <ul> <li class="parent">Videos <ul> <li class="child"><a href="#">Overview</a></li> <li class="child"><a href="#">Add</a></li> </ul> </li> <li class="parent">Music <ul> <li class="parent">Albums <ul> <li class="child"><a href="#">Overview</a></li> <li class="child"><a href="#">Add</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> 

Answer 2

Try adding this code,

$(".child > a").click(function(e) {
   e.stopPropagation();
})

 $(document).ready(function() { function visible($e) { if( $e.is(':visible') ) { return true; } else { return false; } } $('.nav .parent').find('ul').hide(); $(".child > a").click(function(e) { e.stopPropagation(); }) $(document).delegate('.parent', 'click', function() { var $this = $(this), $child = $this.children('ul'); if( visible( $child ) ) { $child.slideUp(); } else { $child.slideDown(); } return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="nav"> <ul> <li class="parent">Media <ul> <li class="parent">Videos <ul> <li class="child"><a href="http://www.google.co.in">Overview</a></li> <li class="child"><a href="http://www.google.co.in">Add</a></li> </ul> </li> <li class="parent">Music <ul> <li class="parent">Albums <ul> <li class="child"><a href="http://www.google.co.in">Overview</a></li> <li class="child"><a href="http://www.google.co.in">Add</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>