resize и разрешение браузера

#javascript #if #resize

Не могу понять в чем проблема с работой кода. Все работает отлично, пока я не сменю
на iPad (в принципе любой планшет) разрешение, то есть не покручу экраном.

$(window).resize(function(){
  if(window.matchMedia && window.matchMedia("(min-width:320px) and (max-width:978px)").matches) {
    $(".navItem a").click(function(){
      $("#nav1").slideUp();
    });
  }
});


Получается, что код отлично обрабатывается, если я держу вертикально планшет, заходит
в блок IF в консоле выводил разрешение, отлично его получает, но стоит мне перевернуть
планшет в горизонтальную ориентацию, у нас получается 1024px разрешение, и код все
равно обрабатывается. Тем самым скрывает мне блок навигации, и я больше не смогу нажать
на кнопки меню. 

Коротко о самой сути кода. У меня есть меню сайта, которое для компов горизонтальное
вверху, а для мобильных скрывается за иконкой "гамбургера". Нажав на которую оно вертикально
выползает вниз. У меня концепция сайта одностраничника, поэтому ссылки якорные, и нету
рефреша сайта. Идет плавная прокрутка к якорю, но он закрыт весь этим выдвенутым меню.
Вот поэтому его надо скрыть после нажатия на ссылку. Этот код что ниже, скрывает, но
почему то он срабатывает и тогда, когда не должен сработать. Ведь если его запустить
сразу на компе, он в блок IF не пускает. Если с горизонтального режима планшета запустить
его тоже все ок, если перевернуть в портретный, тоже все работает на ура, он видит
уменьшение разрешения и заходит в блок IF. Но обратно после горизонтального в портретный
начинает фигней страдать. Перестает обрабатывать IF а просто всегда работает хоть и
условие не подходит.
    

Ответы

Ответ 1

Добро пожаловать на StackOverflow.

Вы назначаете обработчик click внутри обработчика resize. Как только Ваш if выполнится
больше одного раза, click будет вызывать все добавленные функции - столько раз, сколько
они были добавлены. А, ну и когда if не выполняется, уже добавленный обработчик (или
обработчики) click все равно будут выстреливать.

$(window).resize(function(){
  $(".navItem a").off("click");
  if( ... ) {
    $(".navItem a").click(function(){
      $("#nav1").slideUp();
    });
  }
});


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

$(".navItem a").click(function(){
  if(window.matchMedia && window.matchMedia("(min-width:320px) and (max-width:978px)").matches) {
    $("#nav1").slideUp();
  }
});


Тогда обработчик resize вообще не нужен.