использование hide / show jQuery и innerWidth для указания размеров экрана c, чтобы скрыть мобильное меню при нажатии на ссылку привязки

Question

В моем меню есть якорная ссылка, поэтому, когда я нажимаю на нее, накладываемое мобильное меню не исчезает. По этой причине я использовал hide / show 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, из-за медиа-запроса класс будет действовать по-разному в зависимости от размера экрана.

Надеюсь, вы уловили идею.