javascript - 切换而不是使用 URL 进行分页

Question

我正在移动 View 中创建不同风格的导航。带有 + 号的三个链接在桌面 View 中有它们的链接，但我希望在移动设备中单击时，子菜单将切换。如果 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

添加事件绑定(bind)器时，您定义的函数的第一个参数将是事件本身。知道这一点，您可以在事件中调用各种不同的东西。一件事是 preventDefault，它会阻止默认操作。您可以将代码修改为此(假设 a 或带有 href 的 anchor 标记位于 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 也希望它发生，则需要添加另一个事件绑定(bind)来执行相同的操作。像这样:

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

请注意，直接定位 anchor 标记并防止点击操作触发默认行为会更清晰。主要是因为对于后来出现的其他程序，您的目标是什么以及为什么会更明显。

MDN: Event.preventDefault()