Jquery爲手機切換菜單，當調整到桌面時可能會將其關閉

Question

我目前正在使用水平導航菜單工作在響應式網站上，並切換到可擴展移動設備的可點擊菜單圖標。該菜單在桌面分辨率上看起來不錯，在手機上效果很好。

如果我的瀏覽器縮小超過我的分辨率斷點，我的問題就會發生。它切換到移動菜單圖標並隱藏我的標準菜單。如果我點擊圖標菜單顯示。再次點擊它會消失。一切安好。當我縮小瀏覽器備份時，原始菜單會顯示，如果我離開移動切換可見，如果我沒有激活切換首先，但如果我激活它，然後關閉移動菜單，然後縮小備份，標準菜單保持切換隱藏的方面，並再也不會出現。

據我所知，我需要jquery強制切換回可見，當我縮小備份通過我的媒體查詢斷點。但我不知道該怎麼做，而且我還沒有在其他地方發現過這個問題。

$("#menu-icon").on("click", function(){ 
     $("#nav").slideToggle(); 
     $(this).toggleClass("active"); 
    }); 

是我用的功能：

<nav id="nav-wrap"> 
     <div id="menu-icon"><img src="../img/menu.png"></div> 
     <ul id="nav"> 
     <li><a href="default.htm">Home</a></li> 
     <li><a href="obstacles.htm">Obstacles</a></li> 
     <li><a href="location.htm">Location</a></li> 
     <li><a href="register.htm">Register</a></li> 
     <li><a href="sponsor.htm">Sponsor</a></li> 
     <li><a href="volunteer.htm">Volunteer</a></li> 
     <li><a href="faqs.htm">FAQs/Documents</a></li> 
     </ul> 
     </nav> 

是我的導航菜單：

#nav { 
    text-align:center; 
    font-size:1em; 
    text-transform:uppercase; 
    font-weight:900; 
    margin:1em auto; 
    display:block; 
} 
#nav li { 
    display:inline; 
    text-align:center; 
    margin:1em 2em; 
} 
#menu-icon { 
    display:none; 
} 
@media screen and (max-width:600px) { 
#menu-icon { 
    width:30px; 
    height:30px; 
    cursor:pointer; 
    display:block; 
    margin:0em auto 1em auto; 
} 
#nav { 
    clear:both; 
    z-index:10000; 
    padding:5px; 
    background:#000; 
    border:solid 1px #f1f1eb; 
    display:none; 
} 
} 

編輯：我忘了補充。我試圖通過使用單獨的導航，使用一個不同的ID，當它縮小時會隱藏，但有相反的問題，其中一半的時間我縮小備份和2導航菜單，因爲jquery＃資產淨值將在

Answer 1

進行切換使用window.resize功能檢查視口，並添加$("#nav").show();

JS

$(window).resize(function() { 
    //Add a set timeout to prevent resource hogging 
    myWinWidth(); 
}); 

function myWinWidth() { 
    var winWidth = $(window).width(); 
    console.log(winWidth);  
     if(winWidth > 600){ 
       $("#nav").show();   
     } 
    return false; 
}; 

$("#menu-icon").on("click", function(){ 
     $("#nav").slideToggle(); 
     $(this).toggleClass("active"); 
    }); 

小提琴

http://jsfiddle.net/5DQs8/8/