jQuery .slideToggle，display：none

Question

我有一個邏輯問題。我有一個CSS下拉菜單，當瀏覽器或手機的寬度小於690pixles時，就會變成僅顯示在切換器上的菜單。即用戶需要按下按鈕來顯示菜單。然而，一個邏輯問題是，如果您調整瀏覽器大小，請打開菜單，然後再次關閉並將瀏覽器調整爲全寬，正常菜單消失，因爲slideToggle添加了display：none;風格的div元素 - 這會導致佈局問題，並不是非常人性化。任何想法如何解決？

HTML：

<div id="primary-menu" class="drop-down"> 
    <div class="menu-toggle">menu-toggle</div> 
    <ul id="responsive" class="menu"> 
     <li class="menu-item"><a href="#">Link 1</a></li>  
     <li class="menu-item"><a href="#">Link 2</a> 
      <ul class="child-menu"> 
       <li class="menu-item"><a href="#">Link A</a></li> 
       <li class="menu-item"><a href="#">Link B</a></li> 
       <li class="menu-item"><a href="#">Link C</a></li> 
      </ul> 
     </li> 
     <li class="menu-item"><a href="#">Link 3</a></li> 
    </ul> 
</div> 

的jQuery：

$(".menu-toggle").click(function(){ 
    $("#responsive").slideToggle("slow", function() {}); 
}); 

Answer 1

你能證明它藏起來的窗口大小調整，這樣就確保菜單始終是在大屏幕可見和不可見小屏幕。

$(window).resize(function() { 
    if($(window).width() >= 690) { 
     $("#responsive").show(); 
    } 
    else { 
     $("#responsive").hide(); 
    } 
});