Question

我正在移动视图中创建不同风格的导航。带有+符号的三个链接在桌面视图上有链接，但我想在移动设备中点击时，子菜单将切换。如果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');
    });
});

}
});

Answer 1

添加事件绑定器时，您定义的函数的第一个参数将是事件本身。知道了，你可以在一个事件上调用各种各样的东西。有一件事是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;
    });
}

如果你希望它发生，即使宽度是＆lt; 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()

切换而不是使用URL转到页面

1 个答案: