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

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

1 个答案: