使用特定屏幕尺寸的隐藏/显示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。

同样，如果你想让不同的元素根据屏幕大小而不同地工作，让我们说在手机上点击你想隐藏菜单，在桌面点击你想要显示menu.You可以根据媒体查询分配一个CSS类，并可以通过vanilla js或jQuery应用该类，因为媒体查询类将基于屏幕大小而不同。

希望你能明白我的意思。