Jquery 响应导航

我正在尝试创建一些类似的响应性导航，但遇到了一些问题。以下是我现在拥有的：。在本例中可能很难分辨，但当您使用屏幕从小到大时，导航将消失。我知道这是因为jQuery正在检查加载时的屏幕大小是否低于992px。如果是，则隐藏导航。然后，当您放大页面时，导航仍处于隐藏状态。我需要在页面调整大小时重新评估它。我认为有一个jQuery resize（）函数，但它似乎不起作用。有什么想法吗

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

试试这个：

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

也就是说，您应该使用CSS查看媒体查询

不需要javascript

---

希望有帮助：）

使用CSS3会更容易

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<992）{
$（“#导航主”）.hide（）；
}
否则{
$（“#导航主”）.show（）；
}
});

---

工作

这是一个基本的窗口大小调整处理程序

$(window).resize(function(){
    var hideShow=($(window).width() < 992 ) ? 'hide' :'show';
    $('#nav')[hideShow]();
})

$（窗口）。调整大小（函数（）{
var hideShow=（$（window.width（）<992）？“hide”：“show”；
$（#nav'）[hideShow]（）；
})

尝试本教程，链接：

---

演示是他们的，您也可以下载代码。

您可以触发窗口大小调整事件，以便重新计算大小。这是一个很好的观点。我想，因为我必须使用jQuery进行滑动切换，所以我想我应该使用它来隐藏导航。我可能只需要使用display:none进行媒体查询，对吗？

$(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]();
})