通過jquery調整大小時更改下拉菜單

Question

我想根據屏幕分辨率更改下拉菜單的工作方式。我正在通過jQuery來做。

當光標懸停在按鈕 以下並在1024px以下時，ul.level-2菜單會顯示在點擊上。在不同屏幕上刷新頁面時，一切正常，但在調整頁面大小時不起作用 - $（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和鼠標離開功能與你的元素。

要解決這個問題，只需從元素中解除mouseenter和mouseleave動作。

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