如何僅在窗口寬度小於一定量時觸發功能？

Question

我為一些頁腳內容創建了一個簡單的手風琴，我只想在窗口寬度小於 600 像素時觸發。 我試過使用 window.resize 但是當將窗口大小調整為 600px 以上時，該函數仍在初始化，我不明白為什么。

如果有人介意就此分享一些建議，我將不勝感激。 我一直在兜圈子。

js小提琴

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

Answer 1

純JS跨瀏覽器解決方案：

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