我正在嘗試創建一些類似於Boostrap's的響應式導航，但我遇到了一些問題。這是我現在擁有的：http://jsfiddle.net/apautler/eqAZz/。在這個例子中可能很難說，但當屏幕從小到大時導航消失。我知道這樣做的原因是jQuery正在檢查加載時屏幕大小是否小於992px。如果是，則隱藏導航。然後，當您放大頁面時，導航仍然隱藏。我需要以某種方式重新評估頁面大小。我認爲有一個jQuery resize（）函數，但這似乎沒有工作。有任何想法嗎？響應式導航
如果有更好的方法來完成它，我也開始重新開始。謝謝您的幫助！
這將是更容易使用CSS3 Media queries。
@media all and (max-width:500px) {
.navigation {display:none;}
}
這是一個很好的觀點。我猜是因爲我不得不使用jQuery作爲幻燈片切換，我一直在想我應該用它來隱藏導航。我可能可以使用display：none與媒體查詢，對不對？ – Andrew 2012-03-05 15:40:18
嘗試了這一點：
http://jsfiddle.net/will/eqAZz/2/embedded/result/
我不知道爲什麼你不能得到它的工作。在JS小提琴中，你必須看看全屏版本。
這就是說，你應該看看使用CSS的媒體查詢。 http://www.w3.org/TR/css3-mediaqueries/
No javascript required！
希望幫助:)
$(window).resize(function(){
if ($(window).width() < 992) {
$('#nav-primary').hide();
}
else {
$('#nav-primary').show();
}
});
工作
這裏有一個基本的窗口縮放處理
$(window).resize(function(){
var hideShow=($(window).width() < 992) ? 'hide' :'show';
$('#nav')[hideShow]();
})
試試這個教程鏈接：http://hightechnology.in/how-to-create-responsive-menu-2/
演示是他們的，你可以下載代碼太。
您可以觸發窗口大小調整事件，因此大小會再次計算。 – 2012-03-05 15:37:10