当点击锚点链接时，使用特定屏幕尺寸的隐藏/显示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应用该类，因为媒体查询会根据屏幕大小的不同而不同。

希望你明白。