導航菜單未在瀏覽器中呈現

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