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

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

我已经在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文件中，但是它也不起作用。

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

最佳答案

当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包装js代码，如下所示：

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