Как сбросить нажатую кнопку?

Question

[an]

Есть меню

<ul class="mob_1">
            <li><a href="#">Главная</a></li>
            <li><a href="#" >Категории</a></li>
            <li><a href="#">Блог</a></li>
            <li><a href="#">Популярное</a></li>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Контакты</a></li>
         </ul>

есть скрипт

$(function() {
         var burger = $('.burger');
         var mob_1 = $('.mob_1');
         var body = $('.body');
         burger.click(function() {
            mob_1.toggleClass('mob_1_act');
            burger.toggleClass('burger_act');
            body.toggleClass('act_body');
         });
      });

При нажатии на бургер, дает класс меню
которое выезжает, еще раз кликнув по бургеру меню уезжает обратно
по фикс. позиционированию в css с классом act_
вроде все ок, но есть такая трабла

когда браузером сжать экран до моб. версии
нажать на бургер, потом обратно расширить экран до десктопа
то как бы меню обратно не прячется само
можно как то исправить такое?

Answer 1

[Сергей delphinpro]

Вообще это лишнее телодвижение. Такой кейс использования возникает только у разработчика при тестировании. Никто не будет уменьшать и увеличивать размер браузера во время просмотра. Не говоря уже про мобильные, где увеличить экран в принципе не получится.

Но сделать можно. Стиль видимости применить только на мелких экранах.

.menu {
  display: none;
}

@media (max-width: 600px) {
  .menu.open {
    display: block;
  }
}

Comments

[an]

Благодарю!
Сергей

Answer 2

[M1mdex]

Сделайте проверку с помощью if - если класс включен - выключить, если выключен - включить. (Это мои догадки)

Answer 3

[ThunderCat]

вешать евентлистенер resize на окно, при изменении размера больше определенного добавлять класс.

Comments

[Сергей delphinpro]

ну matchMedia же уже давно везде есть.