Jquery 仅当媒体查询为真时才应执行此函数

我正在寻找一种只在某个媒体查询为真时启动jQuery函数的方法

下面的示例显示了向下滑动导航，当视口宽度大于500px时，应展开该导航。如果视口较小，则应通过单击链接隐藏和展开导航

这是一把小提琴：

HTML

jQuery

$(document).ready(function () {

  var mobile = window.matchMedia("(max-width: 500px)").matches;

  if (mobile) {

      $("#mobile-menu").click(function() {
          $("nav").slideToggle( "500" );
      });

      $("nav ul li a").click(function() {
          $("nav").slideToggle( "500" );
      });

  }

});



$(document).resize(function () {

  var mobile = window.matchMedia("(max-width: 500px)").matches;

  if (mobile) {

      $("#mobile-menu").click(function() {
          $("nav").slideToggle( "500" );
      });

      $("nav ul li a").click(function() {
          $("nav").slideToggle( "500" );
      });

  }

});

---

尝试更改。滑动切换到simply。切换或将“500”更改为“slow”，或将字符串“500”更改为数字500。500是一个数字，而不是字符串。关于

.slideToggle（500）

？脚本本身可以工作，但我在设置媒体查询时遇到问题（当加载页面时视口小于500px时）。媒体查询的具体问题是什么？它不适用于调整大小：正如我提到的，当页面加载的视口小于500px时，脚本可以工作，但当视口大于500px时，脚本也可以工作。否则，当页面加载的视口宽度大于500px且大小调整为小于500px的视口时，脚本将无法工作。

nav {
    display: block;
}


@media all and (max-width: 500px) {
    nav {
        display: none;
    }
}

$(document).ready(function () {

  var mobile = window.matchMedia("(max-width: 500px)").matches;

  if (mobile) {

      $("#mobile-menu").click(function() {
          $("nav").slideToggle( "500" );
      });

      $("nav ul li a").click(function() {
          $("nav").slideToggle( "500" );
      });

  }

});



$(document).resize(function () {

  var mobile = window.matchMedia("(max-width: 500px)").matches;

  if (mobile) {

      $("#mobile-menu").click(function() {
          $("nav").slideToggle( "500" );
      });

      $("nav ul li a").click(function() {
          $("nav").slideToggle( "500" );
      });

  }

});