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" 逻辑错了。你的代码是说，"if the width matches, then set up one event handler, otherwise set up a different event handler"。此 "if" 条件只会根据初始 window 大小进行评估。如果您希望它在用户更改 window 大小时正确运行，那么您需要无条件地设置两个事件处理程序，然后将 "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);
      }
   }
});

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

Javascript media queries: How to run script according to the screen width?

javascript

media-queries

jquery-mobile-navbar