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准备就绪时运行您的代码，如：

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

导航菜单无法在浏览器中呈现

1 个答案:

为什么jsfiddle有效？