0

我目前正在开发一个网站，但我在响应方面遇到了问题。

我已经建立了我的菜单，我希望当屏幕宽度大于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），起初它工作正常。我在子菜单打开之前单击链接。但是当我放大浏览器时，行为并没有改变。在子菜单打开之前，我必须再次单击链接。

当我在宽屏幕上加载时也是如此。悬停工作正常。当我缩小屏幕时，它不会让点击工作，悬停继续工作。

有人可以帮助我吗？谢谢你。

4

1 回答 1

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);
      }
   }
});
于 2018-10-28T02:09:19.633 回答