使用隐藏/显示 jQuery 和 innerWidth 用于特定屏幕尺寸，以在单击锚链接时隐藏移动菜单

Question

我的菜单中有一个锚链接，所以当我点击它时，覆盖移动菜单不会消失。 出于这个原因，我使用了隐藏/显示 jQuery，什么有效，但它导致我的桌面屏幕菜单也消失了。在我看来，我需要正确添加 innerWidth ，但我对此感到很挣扎。 代码下方：

$(function() {
$(document).ready(function(){
    if(window.innerWidth < 769 && ".link5Click".click(function(){
        $('#myNav').hide();
    }));
 else 
    $("#hamburger").click(function(){
        $('#myNav').show();
    })
})

});

当我使用以下代码时，我的汉堡按钮停止工作

var onMobile = window.matchMedia("screen and (max-width: 768px)"); 
if (onMobile.matches) {
    $(".link5Click").click(function() {
    $("#myNav").hide();
});
} else {
    $("#hamburger").click(function() {
    $('#myNav').show();
});
}

Answer 1

顺便说一句，如果您只想隐藏和显示某些元素或菜单，您可以使用 CSS 媒体查询并根据屏幕尺寸使用 display:block 或 display:none 来实现。

此外，如果您希望不同的元素根据屏幕大小以不同的方式工作，可以说在移动设备上单击要隐藏菜单，在桌面上单击要显示菜单。您可以根据媒体查询分配 CSS 类，并且可以通过 vanilla js 或 jQuery 应用该类，因为媒体查询该类将根据屏幕大小采取不同的行为。

希望你能明白。