响应式导航

Question

我正在尝试创建一些类似于Boostrap's的响应式导航，但遇到了一些问题。这是我现在所拥有的：http://jsfiddle.net/apautler/eqAZz/。在示例中可能很难区分，但当您使用屏幕从小到大时，导航将消失。我知道这是因为jQuery正在检查加载时屏幕尺寸是否低于992px。如果是，它会隐藏导航。然后，当您放大页面时，导航仍处于隐藏状态。我需要以某种方式让它重新评估页面的大小。我认为有一个jQuery resize()函数，但它似乎不起作用。有什么想法吗？

如果有更好的方法来构建它，我也愿意重新开始。谢谢你的帮助！

Answer 1

使用CSS3 Media queries会容易得多。

@media all and (max-width:500px) { 
     .navigation {display:none;}
}

Answer 2

试试这个：

http://jsfiddle.net/will/eqAZz/2/embedded/result/

我不明白你为什么不能让它工作。不过，在JS fiddle中，您必须查看全屏版本。

也就是说，您应该使用CSS查看媒体查询。http://www.w3.org/TR/css3-mediaqueries/

不需要javascript！

希望这能有所帮助:)

Answer 3

$(window).resize(function(){
if ($(window).width() < 992) {
$('#nav-primary').hide();
}
else {
$('#nav-primary').show();
}
});

作品