页面加载时会打开响应式导航，然后隐藏。应该在页面加载时隐藏答案

【问题标题】：Responsive navigation opens when page loads and then hides. Should be hidden on page load页面加载时会打开响应式导航，然后隐藏。应该在页面加载时隐藏
【发布时间】：2013-12-23 06:43:32
【问题描述】：

我还是 javascript 新手，一直在使用响应式导航：
http://responsive-nav.com

问题是当您加载页面时响应式导航会暂时显示。在您实际打开导航之前，它不应该是可见的。有这个问题的网站是：http://dev.sunnyvista.infront.com/

我知道这种风格可能与它有关：
@media screen and (min-width : 940px) { .js .nav-collapse.closed {max-height:0;}}

在响应式导航的示例中，它设置为 max-height:none;但是，当我将其设置为 @ 987654327@ 它在任何宽于 940 像素的屏幕上显示响应式导航。

我现在已将 javascript 放在页脚中，并且在页面的所有其他 javascript 加载之前，但是当您加载页面时导航仍会暂时显示。我还尝试将上述媒体查询放在页面的头部，只是为了看看它是否需要尽快获得 css 样式。两者都没有工作。

非常感谢有 JavaScript 经验的人提供第二眼！

【问题讨论】：

你使用的是什么 JavaScript？
IMO 从你这边没问题，它看起来像插件中的一个错误。在他们的 github github.com/viljamis/responsive-nav.js 上发布请求。
谢谢，奥利维尔。我将继续通过 github 发布请求。 Jamie – 我正在使用 responsive-nav.js。 github.com/viljamis/responsive-nav.js

标签： javascript css

【解决方案1】：

最初，您必须将导航设置为display:none，并在您想要显示导航的媒体查询截止时将其设置为display:block。

例如：

在普通桌面模式下：（最好将它放在 <head> 部分中加载的 css 文件的顶行）

nav {
    display:none;
}

在小型设备中

@media screen and (max-width : 760px) { 

nav {
    display:block;
}

}

【讨论】：

谢谢，普拉桑斯。我试过这个，但它似乎有时只适用于第一个页面加载，然后任何页面加载，然后响应式导航会暂时显示。我已经在 Chrome v29 和 Firefox v19 中测试过

【解决方案2】：

找到答案：https://github.com/viljamis/responsive-nav.js/issues/24

上面发布的问题很好地回答了这个问题。

【讨论】：