Javascript媒体查询：如何根据屏幕宽度运行脚本？

Question

我目前正在开发一个网站，响应方面有一个问题。

我已经建立了菜单，并且希望当屏幕宽度大于980px时，在悬停后出现子菜单。 在此宽度以下，我希望用户在子菜单出现之前单击菜单。

这是我的HTML代码

<nav>
<ul class="menulist">
    <li class="list-item"><a href="">list-item 1</a></li>
    <li class="list-item"><a href="">list-item 2</a></li>
    <li class="list-item"><a href="">list-item 3</a>
        <a href="#"></a>
        <ul class="sub-menu">
            <li class="list-item"><a href="">list-item 4</a></li>
            <li class="list-item"><a href="">list-item 5</a></li>
        </ul>
    </li>
</ul>

我试图这样做

if (window.matchMedia("(max-width: 980px)").matches) {
  $('.list-item > .sub-menu').parent().click(function() {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
    });
} else {
  $('.list-item > .sub-menu').parent().hover(function() {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
    });
}

而且这样

if ($(window).width() < 981) {
    $('.list-item > .sub-menu').parent().click(function() {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
    });
}
else {
    $('.list-item > .sub-menu').parent().hover(function() {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
    });
}

但这是行不通的。

实际上，当我调整浏览器大小时，行为不会改变。 当我在移动设备（宽度<981）上加载网站时，起初效果不错。 我在打开子菜单之前单击链接。 但是，当我放大浏览器时，行为不会改变。 在打开子菜单之前，我必须再次单击链接。

在宽屏上加载时是相同的。 悬停正常工作。 当我缩小屏幕时，单击不起作用，悬停继续起作用。

有人可以帮我吗？ 谢谢。

Answer 1

您的“如果”逻辑位置错误。 您的代码说，“如果宽度匹配，则设置一个事件处理程序，否则设置另一个事件处理程序”。 此“如果”条件将仅根据初始窗口大小进行评估。 如果要在用户更改窗口大小时使其正常运行，则需要无条件设置两个事件处理程序，然后将“ if”条件放入事件处理程序函数中。 例如，在“悬停”事件处理程序内部，如果宽度<981，则不执行任何操作，否则显示菜单。 这是代码看起来的示例（未经测试）：

$('.list-item > .sub-menu').parent().click(function() {
   if (window.matchMedia("(max-width: 980px)").matches) {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
   }
});
$('.list-item > .sub-menu').parent().hover(function() {
   if (!window.matchMedia("(max-width: 980px)").matches) {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
   }
});