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

331

30 января 2017, 19:40

Не могу понять в чем проблема с работой кода. Все работает отлично, пока я не сменю на 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 а просто всегда работает хоть и условие не подходит.

Answer 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();
  }
});