如何启用菜单点击时，隐藏格为响应式布局

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

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

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

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

这意味着当您调整大小并在移动模式下单击“.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(); 
    }); 
} 

希望这有助于

肖恩

PS：

可能要重构为这样的事情，从长远来看，我认为这是有点清洁：

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，以防止在调整大小时发生数百万次函数调用。