CODEWITHSUNDEEP
javascriptjquery
SuperDJ
SuperDJ

Reputation: 7661

jQuery dropdown menu links not working

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

Upvotes: 0

Views: 515

Answers (2)

Dimag Kharab
Dimag Kharab

Reputation: 4519

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>

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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>

Upvotes: 1

Related Questions