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

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时，您应该运行代码。因此，您可能有两种替代方法：

• 当Dom准备好时运行您的代码，如下所示： $(函数(){$(“#nav”).addClass(“js”).before(‘window.innerWidth ')；$(“#菜单”).click(函数(){ $("#nav").toggle()；}；$(窗口).resize(函数(window.innerWidth> 768){ $(“#nav”).removeAttr(“样式”)；})；})；
• 将js代码放在HTML的底部。

为什么小提琴会起作用？

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

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