JavaScript 在屏幕宽度 < 480 时执行脚本，而不是在屏幕宽度大于 > 480 时执行脚本？

Question

嘿，我有这个非常简单的小脚本，但我不是 js 开发人员，我不知道如何解决这个问题。我在我的网站前端使用 bourbon 和 neat，当我想使用我从 bourbon 笔芯中获取的折叠脚本时，我有一个页面。我的问题是如何让这个脚本只在屏幕宽度低于 480px 时才工作，如果它不低于 480 不执行这个脚本？

HTML代码

<div class="expander">
  <a href="javascript:void(0)" class="expander-trigger expander-hidden">Expandable section</a>
  <div class="expander-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio mollitia fugiat facilis enim accusamus quisquam aut, repellendus incidunt quod optio facere labore illo numquam ipsum beatae vero debitis, fugit excepturi.</p>
  </div>
</div>

JavaScript 代码

$(document).ready(function() {
  $('.expander-trigger').click(function(){
    $(this).toggleClass("expander-hidden");
  });
});

Answer 1

$(document).ready(function() {
  $('.expander-trigger').click(function(){
    if($(window).width() < 480) { // check width of window
      $(this).toggleClass("expander-hidden");
    }
  });
});

编辑:根据评论讨论，这才是您真正想要的

$(document).on('resize', function() {
    if($(window).width() < 480) { // check width of window
        //document smaller than 480
    } else {
        //document larger than 480
    }
});