如何在为响应布局隐藏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

我认为您需要确保取消绑定早期的汉堡包"on"点击事件。当页面第一次以全屏加载时，由于您的第一行代码，单击函数被绑定到"汉堡包"元素。

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

如果您将大小调整为桌面模式，并且不再满足此初始条件（屏幕宽度<=768），则无所谓，此处定义的单击功能仍然绑定到"汉堡包"元素。

这意味着当你在移动模式下调整大小并点击"汉堡包"时，你同时运行了移动功能和先前绑定的功能。所以你切换了两次导航，一次打开，一次关闭。这就是你遇到问题的原因。

试试这个：

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

希望这能有所帮助，

Sean

第页。S.：

从长远来看，可能需要重构到这样的东西，我认为它更干净：

function isViewportMobile() {
 if($(window).width() <= 768) {
   return true;
  }
}
$(window).on("resize", function(){
   if (!isViewportMobile()) {
     useDesktopRules();
   } else {
     useMobileRules();
   }
});

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

还可以考虑使用"节流/去抖动"函数，以防止在调整大小时进行数百万次函数调用。