Как запускать функцию только тогда, когда ширина окна меньше определенной величины?

#html #jquery #css

#HTML #jquery #css

Вопрос:

Я создал простой аккордеон для некоторого содержимого нижнего колонтитула, который я хочу запускать только тогда, когда ширина окна меньше 600 пикселей. Я пробовал использовать window.resize, но при изменении размера окна выше 600 пикселей функция все еще инициализируется, и я не могу понять, почему.

Если кто-нибудь не против поделиться некоторыми советами по этому поводу, я был бы очень признателен. Я продолжаю ходить по кругу.

jsFiddle

JS:

 function initializeAccordion() {
  var mainToggle = $('.footer-accordion > .footer-column > p');
  $('.footer-accordion > .footer-column > .menu').css('display', 'none');

  mainToggle.click(function() {
    var that = $(this);
    var secondLevel = $(this).siblings('.menu');
    var allSeconds = $('.footer-accordion > .footer-column > .menu');

    if (that.hasClass('is-active')) {
      secondLevel.slideUp();
      that.removeClass('is-active');
      mainToggle.removeClass('is-active');
      allSeconds.removeClass('is-active');
      allSeconds.slideUp();
    } else {
      mainToggle.removeClass('is-active');
      allSeconds.removeClass('is-active');
      allSeconds.slideUp();
      secondLevel.slideDown();
      that.addClass('is-active');
      secondLevel.addClass('is-active');
    }
  });
};

if ($(window).width() < 600) {
  initializeAccordion();
}

$(window).on('resize', function() {
  if ($(window).width() < 600) {
    initializeAccordion();
  }
});

1. Вам нужно написать else условия в своих if операторах, чтобы сбросить состояние аккордеона, когда страница > 600px широкая. Это не происходит автоматически. При этом, поскольку все, что вы делаете, это вносите изменения в некоторые классы и выполняете некоторые анимации, я бы настоятельно рекомендовал вам использовать для этого медиазапросы CSS вместо JS. Они будут работать на порядки быстрее и будут более плавными.

2. Хорошо, но можете ли вы объяснить, почему событие щелчка по-прежнему срабатывает при изменении размера, скажем, с 400 пикселей до 800 пикселей?

3. Потому что вы прикрепили событие при загрузке страницы и не привязываете его. Используйте off() для этого

4. О, я понимаю! Хорошо, спасибо, что указали мне правильное направление.

Ответ №1:

Чистое кроссбраузерное решение на JS:

 window.onresize = function() {
  checkWidth();
}
checkWidth();

function checkWidth() {
  var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
  if (vw < 600) {
    //callFunction();
  }
}

1. Еще один отрицательный отзыв, потому что он не имеет никакого отношения к вопросу каким-либо полезным образом

2. Я изменил фоновый переключатель на функцию. Надеюсь, это прояснит ситуацию.