javascript - 为响应式布局隐藏 div 时如何启用菜单单击

Question

当调整到平板电脑/手机时，我有一个隐藏子导航菜单 .nav-sub-wrapper 的导航。问题是，由于这个特定的 jQuery 用于在调整大小时隐藏菜单，因此当单击菜单 (.hamburger) 图标时，它会禁止菜单在移动/平板设备上显示。

如何启用 .hamburger 菜单来触发 .nav-sub-wrapper 类在点击时显示？

if($(window).width() <= '768'){
$(".nav-sub-wrapper, .desktop-search-box").hide();
$(".hamburger").on('click', function(){
  if($(".logo-link").css("display") == 'none'){
    $(".hamburger").addClass("hamburger-active");
  }
  $('.list-header').trigger('click');
  $(".nav-sub-wrapper").toggle();
  $(".search").show();
});
}

//used to hide nav on resize//
function navHidden() {
  if ($(window).width() <= 768) {
    $(".nav-sub-wrapper").hide();
    $(".hamburger").on('click', function() {
      $(".nav-sub-wrapper").toggle();
    });
    } else {
      $(".nav-sub-wrapper").show();
    }
  }

  $(window).resize(function() {
    navHidden();
  });

  $(document).ready(function() {
    navHidden();
  });

Answer 1

我认为您需要确保取消绑定(bind)较早的汉堡包“打开”点击事件。当页面首次全屏加载时，由于您的第一行代码，点击功能被绑定(bind)到“.hamburger”元素。

if($(window).width() <= 768) {
   // Any event bindings you create here will still exist
   // even if you create a new binding somewhere else.
}

如果你调整到桌面模式并且不再满足这个初始条件(屏幕宽度 <= 768)也没关系，这里定义的点击功能仍然绑定(bind)到“.hamburger”元素。

这意味着当您在移动模式下调整大小并单击“.hamburger”时，您将同时运行移动功能和较早的绑定(bind)功能。所以你要切换导航两次，一次打开，一次关闭。这就是您遇到问题的原因。

试试这个:

if ($(window).width() <= 768) {
    //Remove anything still bound from earlier that could be causing a double-fire.
    $(".hamburger").off('click');
    $(".hamburger").on('click', function() {
        $(".nav-sub-wrapper").toggle();
    });
}

希望对您有所帮助，

肖恩

附言:

从长远来看可能想重构为这样的东西，我认为这样更简洁:

function isViewportMobile() {
 if($(window).width() <= 768) {
   return true;
  }
}

$(window).on("resize", function(){
   if (!isViewportMobile()) {
     useDesktopRules();
   } else {
     useMobileRules();
   }
});

useDesktopRules 和 useMobileRules 将包含您之前为每个视口(viewport)提供的 jQuery/dom 操作代码。

Consider using a "throttling / debouncing" function as well ，以防止在调整大小时发生数百万次函数调用。