如何只在窗口宽度小于一定量时触发一个函数？

Question

我为一些只想在窗口宽度小于600px时触发的页脚内容创建了一个简单的手风琴。我试过使用window.resize，但是当窗口的大小超过600px时，函数仍然在初始化，我不明白为什么。

如果有人愿意分享一些这方面的建议，我将非常感谢。我一直在兜圈子。

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

Answer 1

一款纯JS跨浏览器解决方案：

null

js prettyprint-override">window.onresize = function() {
  checkWidth();
}
checkWidth();

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