Toggle instead of going to page with URL

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');
    });
});

}
});

---

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()

链接地址: http://www.djcxy.com/p/83970.html

上一篇: 通过点击另一个元素将类切换为元素

下一篇: 切换而不是转到使用网址的页面