JavaScript 媒体查询 : How to run script according to the screen width?

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”条件将仅根据初始窗口大小进行评估。如果您希望在用户更改窗口大小时正确运行，则需要无条件设置两个事件处理程序，然后将“if”条件放入事件处理程序函数中。例如，在“hover”事件处理程序中，如果宽度 < 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);
      }
   }
});