獲取漢堡包菜單以顯示導航鏈接使用Javascript

在我的學校，我們開設了關於HTML5和CSS3的課程，其中一個部分專注於製作適合移動設備的網站。其中包含的一件事是一個預先製作的腳本，一旦你點擊漢堡菜單圖像就會顯示一堆導航鏈接。這裏是這裏的腳本：獲取漢堡包菜單以顯示導航鏈接使用Javascript

/* 
    Lakeland Reeds Bed and Breakfast menu toggle script 
    Filename: script.js 
    HTML5 and CSS3 Illustrated Unit I, Lessons 
*/ 

var navButton = document.querySelector(".navigation-menu-button img"); 
if (navButton.addEventListener) { 
    navButton.addEventListener("click", function() { 
    var nav = document.querySelector(".sitenavigation ul"); 
    if (nav.style.display === "block") { 
     nav.style.display = ""; 
    } else { 
     nav.style.display = "block"; 
    } 
    }, false); 
}

我一直在擺弄這個腳本，並試圖將其塑造成什麼我自己的網站需要。只是你知道，.sitenavigation指的是頁面上的html元素。我們的網站沒有無序列表，因此它已經與上面的腳本爲自己的頁面設置不同。這裏是我的網站的腳本：

var navButton = document.querySelector(".img"); 

function showNav() { 
    var navBar = document.querySelector(".nav"); 
    if (navBar.style.display === "block") { 
     navBar.style.display = "none"; 
    } else { 
     navBar.style.display = "block"; 
    } 
} 

showNav();

.img指的是漢堡菜單圖像，而.nav指的是html元素。我會使用一個事件監聽器，但是在函數的某個地方有一個錯誤。 Chrome指向第5行，並且它說：「無法在showNav讀取Null屬性'樣式'。

我是不是做一些簡單的錯誤，如果是這樣，那麼什麼是修復？如果有更簡單的方法，那麼我很樂意聽到它。

來源

2017-04-03 Wyxe

「無法讀取在showNav空的特性‘風格’」意味着元素沒有被發現的。

您是否正在通過腳本標記載入您的JavaScript？如果您的腳本標記位於.nav元素之前，那麼當它加載時，該元素將不會存在於頁面上，因此它將沒有「樣式」屬性。

如果是這樣的話，您應該將您的標籤文檔的結尾，結束標記之前或等待文件，要求你的代碼之前加載。您可以使用像這樣等待文件事先加載：

document.addEventListener("DOMContentLoaded", function(event) { 
    //your javascript code goes here 
});

來源

2017-04-03 22:56:16 Tutch

擺脫了錯誤，但腳本仍然無法正常工作。我改變了導航元素，所以它有一個無序列表，並且它弄亂了漢堡包菜單圖像，所以我現在就放棄了它。不是將navButton分配給#hamburger，而是將其分配給nav元素。當我在正方形上打開時，沒有任何東西彈出 – Wyxe

您應該顯示HTML標記以便我們看到。如果不知道自己在做什麼，就無法提供幫助。 – Tutch

上面肯定有助於答案，但真正的問題並不是這一點。

腳本它有幾個邏輯錯誤，以及CSS文件是最大的問題。我隱藏了一切，.nav ul，.nav li和.nav p。由於p是ul的孩子，我需要做的只有ul隱藏，並使用原始腳本取消隱藏（重命名其中的一些元素）。從那裏，這只是一堆樣式規則，試圖獲得無序列表，我希望它看起來如何。漢堡菜單圖像文件存在問題，但我不知道如何解決該問題。

var navButton = document.querySelector("nav"); 
if (navButton.addEventListener) { 
    navButton.addEventListener("click", function() { 
    var nav = document.querySelector(".nav ul"); 
    if (nav.style.display === "block") { 
     nav.style.display = ""; 
    } else { 
     nav.style.display = "block"; 
    } 
    }, false); 
}

這是工作腳本。我將腳本html元素放置在關閉body標記的上方，以便識別腳本中命名的所有元素。出於某種原因，默認情況下nav元素被設置爲「block」，即使在css文件中它被設置爲「none」，所以它被賦予一個null值用於顯示規則 - 因此它不顯示。 else塊是導航元素被點擊時發生的情況。 .nav p元素設置爲顯示：block;而.nav ul元素設置爲顯示：無;在CSS中。 .nav ul元素規則在.nav p元素規則之後。希望這可以爲其他人解決這個問題。

來源

2017-04-04 01:31:52 Wyxe

獲取漢堡包菜單以顯示導航鏈接使用Javascript

回答

相關問題