Question

我想根据屏幕分辨率更改下拉菜单的工作方式。我是通过jquery做的。

当光标悬停在按钮上时，将显示1024px以上的ul.level-2菜单在1024px以下，它会对点击产生反应。在不同屏幕上刷新页面时一切正常，但在调整页面大小时它不起作用 - $（window）.resize（）。当我将浏览器从1024px调整到更低时，它仍然会在悬停时作出反应。我怎样才能让它发挥作用？任何建议将不胜感激。

CodePen：https://codepen.io/miunik/pen/GqWYdg

HTML

<ul class="level-1">
  <li>1 level item
    <ul class="level-2">
      <li>2 level item</li>
      <li>2 level item</li>
      <li>2 level item</li>
      <li>2 level item</li>
    </ul>
  </li>
  <li>1 level item
    <ul class="level-2">
      <li>2 level item</li>
      <li>2 level item</li>
      <li>2 level item</li>
      <li>2 level item</li>
    </ul>
  </li>
</ul>

的jQuery

$(document).ready(function() {
  function setNav() {
    if (window.outerWidth < 1024) {
      $('.level-1 li').on({
        click: function() {
          $(this).children('.level-2').toggleClass('open');
        }
      });
    } else if (window.outerWidth > 1024) {
      $('.level-1 li').on({
        mouseenter: function() {
          $(this).children('.level-2').addClass('open');
        },
        mouseleave: function() {
          $(this).children('.level-2').removeClass('open');
        }
      });
    }
  }
  setNav()
  $(window).resize(function() {
    setNav();
    console.log(window.outerWidth);
  });

});

Answer 1

问题是因为您已将mouseenter和mouseleave函数与元素绑定在一起。

要解决此问题，只需取消绑定元素中的mouseenter和mouseleave操作即可。

  $(window).resize(function() {
     $('.level-1 li').unbind( "mouseenter" );
     $('.level-1 li').unbind( "mouseleave" );
     setNav();
     console.log(window.outerWidth);
  });

通过jquery调整大小时更改下拉菜单

1 个答案: