为响应式布局隐藏 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”点击事件。当页面第一次以全屏加载时，由于您的第一行代码，点击功能被绑定到“.hamburger”元素。

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

如果你调整到桌面模式并且不再满足这个初始条件（屏幕宽度

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

试试这个：

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 将包含您之前为每个视口提供的 jQuery/dom 操作代码。

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