Question

在我的学校，我们有关于HTML5和CSS3的课程，其中一个部分专注于制作适合移动设备的网站。它包含的一件事是一个预先制作的脚本，一旦你点击汉堡菜单图像就会显示一堆导航链接。这是脚本：

/* 
  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的属性'样式'”。

我是否犯了一些简单的错误，如果是这样，那么解决的是什么？如果有一个更简单的方法，那么我很乐意听到它。

Answer 1

＆＃34;无法读取属性＆＃39; style＆＃39;在showNav＆＃34;意味着根本找不到该元素。

您是否通过脚本代码加载Javascript？如果您的脚本标记位于.nav元素之前，则在加载元素时，该页面上仍然存在该元素，因此它将没有“样式”标记。属性。

如果是这种情况，您应该将标记移动到文档的末尾，在结束正文标记之前，或者在调用代码之前等待文档加载。你可以使用这样的东西来等待事先加载文件：

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

Answer 2

上面的答案肯定有帮助，但真正的问题不仅仅是那个。

脚本中有一些逻辑错误，而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元素放在结束体标记上方，因此可以识别脚本中命名的所有元素。由于某种原因，默认情况下nav元素被设置为“阻止”，即使在css文件中它被设置为“none”，因此它被赋予显示规则的空值 - 因此它不显示。 else块是单击nav元素时发生的事情。 .nav p元素设置为display：block;而.nav ul元素设置为display：none;在css。 .nav ul元素规则来自.nav p元素规则。希望这可以解决其他任何有这个问题的人。

获取汉堡菜单以在Javascript中显示导航链接

2 个答案: