CODEWITHSUNDEEP
javascriptjquerystoppropagation
JJ L
JJ L

Reputation: 11

jQuery: Element with stopPropagation Going to Its Link

I'm using stopPropagation to make a parent menu item that links to /# to show a dropdown child menu when clicked. It does show the child menu when clicked, but it first goes to url/# before showing the child menu. I'd like it to ignore its link and just show the dropdown menu. My code is below:

$(document).on('click', '#navpanel .mainnav a[href^="/#"]', function(e){
 if($(this).parent('li').hasClass('expanded')) {  
  $(this).siblings('ul').css('display', 'block').slideDown('linear', function(){
    $(this).parent('li').toggleClass('expanded');

  });
} else {
  $(this).siblings('ul').css('display', 'none').slideUp('linear', function(){
  $(this).parent('li').toggleClass('expanded');
  });
}
 var objHeight = 0;
 $.each($('ul.tier1').children(), function(){
        objHeight += $(this).height();
 });
 $('ul.tier1').height(objHeight);
e.stopPropagation();
});

Upvotes: 0

Views: 51

Answers (1)

Y.Puzyrenko
Y.Puzyrenko

Reputation: 2196

If i understood you right you need not stopPropagation but prevent default. Add this to your link click event. It will disable default action, which in your case is redirect.

e.preventDefault();

stopPropagation just prevents your event from bubling in the DOM tree

Upvotes: 2

Related Questions