仅当媒体查询为真时才应执行功能

Question

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

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

这是一个小提琴： http://jsfiddle.net/qjh3p/1/

HTML

<a id="mobile-menu">Slide Down</a>

<nav>
    <ul>
        <li><a>Link 1</a></li>
        <li><a>Link 2</a></li>
        <li><a>Link 3</a></li>
    </ul>
</nav> 

CSS

nav {
    display: block;
}


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

的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" );
      });

  }

});