导航菜单未在浏览器中呈现

Question

我制作了一个导航菜单，供我的网站在人们通过手机访问该网站时使用。 出于某种原因，我只能在我制作的小提琴上看到它的工作原理，而在浏览器中测试时却看不到。

我已经在Chrome和最新版的IE上进行了测试，但是在缩小浏览器尺寸时看不到响应式导航菜单。

这正是我的javascript文件的样子：

$("#nav").addClass("js").before('<div id="menu">&#9776; MENU </div>');
$("#menu").click(function(){
    $("#nav").toggle();

});

$(window).resize(function(){
    if(window.innerWidth > 768){
        $("#nav").removeAttr("style");

    }
});

这是我的小提琴：

http://jsfiddle.net/Nuxj6/

我的CSS文件和HTML文件与小提琴中的代码相同。 唯一不同的是，我的网站其余部分都有另一个CSS文件。 此CSS文件仅用于导航菜单。 我尝试将带有导航菜单的CSS文件导入到我的主CSS文件中，但是它也不起作用。

对于解决此问题的任何建议，我将不胜感激。 就像我说的，它只能在小提琴中起作用，而不能在我的浏览器中起作用。 提前致谢。

Answer 1

当DOM准备就绪或浏览器已解析#nav或jQuery无法找到#nav时，应运行代码。 因此，您可能有2种替代方法：

• Dom准备就绪时运行代码，如下所示：

   $(function() { $("#nav").addClass("js").before('<div id="menu">&#9776; MENU </div>'); $("#menu").click(function(){ $("#nav").toggle(); }); $(window).resize(function(){ if(window.innerWidth > 768){ $("#nav").removeAttr("style"); } }); }); 

• 将您的js代码放在HTML的底部。

为什么jsfiddle有效？

这是因为如果您使用jQuery，jsfiddle将使用$(window).load .load包裹js代码，如下所示：

$(window).load(function(){
    $("#nav").addClass("js").before('<div id="menu">&#9776; MENU </div>');
    ...
});