切换而不是转到带有URL的页面

Question

I'm creating different style of navigation in mobile view. The three links that has + sign has their link on desktop view but I want in mobile when clicked, the sub menu will toggle. How can I do that if the 3 links has href? How to prevent the link going to the another page?

This is my code

$(window).resize(function() {
var width = $(document).width();
if (width >= 320) {
    $("ul#main-menu li").on("click", function() {
      $(this).next().find('ul.sub-menu').css("display", "block");
      $(this).next().find('ul.sub-menu').slideToggle(300);
      return false;
    });
}

else {
    $("ul#main-menu li").each(function() {
    $(this).hover(function() {
        var thiswidth = $(this).css('width');
        thiswidth = parseInt(thiswidth);
        thiswidth = thiswidth / 2;
        var nbsub = $(this).find('.sub-menu').children().length;
        submulti = 257;
        if($(this).hasClass('petite')){
            submulti = 206;
        }
        subwidth = (nbsub * submulti);
        subwidthhalf = subwidth / 2;
        if($(this).hasClass('premier')){
            subwidthhalf = subwidthhalf - 75 ;
        }
        if($(this).hasClass('milieu')){
            subwidthhalf = subwidthhalf + 156;
        }
        if($(this).hasClass('dernier')){
            subwidthhalf = subwidthhalf + 368 ;
        }
        subleft = (thiswidth - subwidthhalf);           
        $(this).find('.sub-menu').css('width',subwidth + 'px');
        $(this).find('.sub-menu').css('left',subleft + 'px');
        $(this).find('.sub-menu').css('display','block');
        }, function() {
        $(this).find('.sub-menu').css('width','auto');
        $(this).find('.sub-menu').css('left','-9999px');
        $(this).find('.sub-menu').css('display','none');
    });
});

}
});

Answer 1

When you add an event binder, the first parameter to the function you define will be the event itself. Knowing that, there are various things you can call on an event. One thing is preventDefault which would prevent the default action. You would modify your code to this (assuming the a or anchor tags with the href are inside the li tags):

if (width >= 320) {
    $("ul#main-menu li").on("click", function(evt) {
      evt.preventDefault();
      $(this).next().find('ul.sub-menu').css("display", "block");
      $(this).next().find('ul.sub-menu').slideToggle(300);
      return false;
    });
}

If you want it to happen even if the width is < 320, you'd need to add another event binding to do the same thing. Like so:

if (width >= 320) {
    $("ul#main-menu li").on("click", function(evt) {
      evt.preventDefault();
      $(this).next().find('ul.sub-menu').css("display", "block");
      $(this).next().find('ul.sub-menu').slideToggle(300);
      return false;
    });
} else {
   $("ul#main-menu li").on("click", function(evt) {
      evt.preventDefault();
   });
   ... 
}

Note that it would be cleaner to target the anchor tags directly and prevent the click action from triggering the default behavior. Mostly because it would be more obvious what you're targeting and why for other programs who come along later.

MDN: Event.preventDefault()