У меня есть меню, которое открывается при нажатии на кнопку, и также закрывается. Также, с помощью медиа запроса сделал так, чтобы при изменении экрана меню скрывалось. То есть, если ширина экрана больше 800px, меню получает "display: none;".
Но если меню было открыто, оно не закроется, а просто получит "display: none;". В момент перехода с ширины 801px на 800px и ниже, оно появляется сразу же открытым, так как display становится flex.
Чтобы исправить это нужно сделать так, чтобы в момент перехода с 800px на 801px и больше, елемент не просто получал "display: none;", нужно чтобы удалялся класс у елемента. Как это сделать?
@media (min-width: 801px) {
.mobile-menu-active {
display: none;
}
}
const mediaQueryMin = window.matchMedia('(min-width: 800px)')
if (mediaQuery.matches) {
navButton.on('click', function(e){
e.stopPropagation();
mobileMenu.toggleClass('mobile-menu-active');
$('.burger-menu--close').toggleClass('burger-menu--close-active')
$('.burger-menu--menu').toggleClass('burger-menu--menu-disable')
});
} else {
mobileMenu.removeClass('mobile-menu-active');
}
И вот код, которым я хотел удалить класс, но он почему-то не работает:
function menuRemoveClass() {
if($(window).width() > 800) {
$('.mobile-menu').removeClass('.mobile-menu-active');
}
}
$(window).resize(function(){
menuRemoveClass();
})