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

Question

我为我的网站制作了一个导航菜单，供人们在手机上访问该网站时使用。出于某种原因，我只能在我制作的 fiddle 上看到它起作用，但在我的浏览器中测试它时却看不到它。

我已经使用 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");

    }
});

这是我的 fiddle :

http://jsfiddle.net/Nuxj6/

而且我的CSS文件和HTML文件和fiddle中的代码一样。唯一不同的是我的站点的其余部分有另一个 CSS 文件。此 CSS 文件仅用于导航菜单。我尝试将带有导航菜单的 CSS 文件导入到我的主 CSS 文件中，但它也没有用。

对于解决此问题的任何建议，我将不胜感激。正如我所说，它在 fiddle 中起作用，但在我的浏览器中不起作用。提前致谢。

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

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