開啓/關閉後解決方案消失響應導航

Question

我以前問過這個問題，但還是不成功。希望有人現在可以幫助我......在小提琴中，您會看到一個響應式菜單，當菜單項大於1000像素時，它有4個水平內嵌的菜單項。小於1000px的菜單顯示一個nav-btn（現在是一個RED盒子！），onclick顯示菜單項目，但是當打開和關閉並調整大於1000像素時，其餘3個菜單項目不顯示。我做了一些媒體查詢測試，但我認爲解決方案必須在javascript部分中找到。任何人都可以應對這一挑戰

這裏FIDDLE

$(function() { 
$('.nav-btn').click(function(event) { 
$('nav ul').fadeToggle(300); 
}); 
}); 

Answer 1

你可能要像我一樣在這裏@FIDDLE

@media all and (min-width: 1000px) { 
    nav ul { 
    display: block; 
    top: 60px; 
    } 
} 

Answer 2

好添加新的媒體查詢，問題是，你的fadeToggle設置您nav > ul到style="display: none"。樣式設置直接覆蓋任何樣式表，除非您使用！important。

因此，與NMindz答案相結合，試試這個：

@media all and (min-width: 1000px) { 
    nav ul { 
    display: block !important; 
    top: 60px; 
    } 
} 

你也可以嘗試純CSS的解決方案，可能會更好。喜歡的東西

nav ul.show { 
    display: block; 
} 

而對於JavaScript的

$(function() { 
    $('.nav-btn').click(function(event) { 
     $('nav ul').toggleClass("show"); 
    }); 
});