切换而不是转到使用网址的页面

我在移动视图中创建不同风格的导航。 三个带有+符号的链接在桌面视图上有链接，但是我想在移动时点击，子菜单会切换。 如果3个链接有href，我怎么做？ 如何防止链接转到另一个页面？

这是我的代码

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

}
});

---

添加事件联编程序时，您定义的函数的第一个参数将是事件本身。 了解到这一点，您可以通过各种途径召集一个活动。 有一件事是防止默认行为的preventDefault 。 你可以修改你的代码（假设a或带href锚标签位于li标签内）：

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

如果你想要它发生，即使宽度<320，你需要添加另一个事件绑定来做同样的事情。 像这样：

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();
   });
   ... 
}

请注意，直接定位锚点标记并防止点击操作触发默认行为会更清晰。 主要是因为它会更明显地指向你的目标，以及为什么其他程序晚点来临。

MDN：Event.preventDefault（）

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

上一篇: Toggle instead of going to page with URL

下一篇: How To Prevent Drop Down Menu From Closing When User Clicks Into It?