1

У меня есть меню, которое открывается при нажатии на кнопку, и также закрывается. Также, с помощью медиа запроса сделал так, чтобы при изменении экрана меню скрывалось. То есть, если ширина экрана больше 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();
})
1
  • 1
    он не работает, потому что removeClass('mobile-menu-active') пишется без точки 14 ноя 2021 в 11:11

1 ответ 1

0

Вроде как решил:

function menuRemoveClass() {
  if($(window).width() > 800) {
    $('.mobile-menu').removeClass('mobile-menu-active');
    $('.burger-menu--menu').removeClass('burger-menu--menu-disable')
    $('.burger-menu--close').removeClass('burger-menu--close-active')
  }
}

$(window).resize(function(){
  menuRemoveClass();
})

Я не убрал точку (исправил), а также для правильной работы удалил классы с кнопок. Вроде как теперь работает, но возможно у вас будь решения поудонее.

1
  • В данном решении есть небольшой минус. Вызов функции будет срабатывать при изменении экрана даже на 1 пиксель. А это в свою очередь будет нагружать клиентскую машину. Попробуйте воспользоваться @media-query и пропишите нужные Вам стили для данных классов под соответствующее разрешение экрана.
    – user467825
    14 ноя 2021 в 15:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.