无法弄清楚为什么这不起作用

问题描述

在移动视图中，我不知道为什么我的汉堡菜单onclick功能无法正常工作。

var hamburger = document.getElementById("hamburger");

hamburger.addEventListener("click",changeImage);

function changeImage() {
    if (hamburger.src === "./images/icon-hamburger.svg") {
        hamburger.src = "./images/icon-close.svg";
        document.getElementById("hidden-nav").style.display = "block";
    }
    else {
        hamburger.src = "./images/icon-hamburger.svg";
        document.getElementById("hidden-nav").style.display = "none";
    }
}

我不知道您是否需要其他任何信息来帮助我，但这让我有些焦虑，因为我觉得代码应该可以工作，但实际上什么也没做。 >

预先感谢您的帮助！

解决方法

您可以使用纯CSS来更改汉堡包样式，而不必使用图像。

我在下面添加了一个汉堡包和侧边栏功能。

function myFunction(x) {
  var y = document.getElementById("ham");
  if (y.className == "container change") {
   y.classList.remove("change");
   document.getElementById("mySidenav").style.width = "0px";
   document.getElementById("main").style.marginLeft = "0px";
  }
  else {
  y.classList.add("change");
     document.getElementById("mySidenav").style.width = "250px";
   document.getElementById("main").style.marginLeft = "250px";
  }
  
}

.bar1,.bar2,.bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px,6px);
  transform: rotate(-45deg) translate(-9px,6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px,-8px);
  transform: rotate(45deg) translate(-8px,-8px);
}


/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links,change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens,where height is less than 450px,change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<div id="main">
<p>Click on the Menu Icon to transform it to "X":</p>
<div class="container" id="ham" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div id="mySidenav" class="sidenav">
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
</div>

我可以找出两种情况，首先在javascript标签中加载<head>文件（或仅在html脚本中），这导致文件在页面完全加载之前就已加载。这可能是因为document.getElementById("hamburger")找不到任何东西。为避免这种情况，您必须将脚本推入html的末尾，并确保在页面加载所有组件后触发它

var hamburger;
addEventListener('DOMContentLoaded',()=>{
    hamburger = document.getElementById("hamburger")
    hamburger.addEventListener("click",changeImage);
});

function changeImage() {
    if (hamburger.src === "./images/icon-hamburger.svg") {
        hamburger.src = "./images/icon-close.svg";
        document.getElementById("hidden-nav").style.display = "block";
    }
    else {
        hamburger.src = "./images/icon-hamburger.svg";
        document.getElementById("hidden-nav").style.display = "none";
    }
}

另一个可能的错误是您的分层html！确保添加事件侦听器的元素位于dom层的顶部。确保您的汉堡元素位于z-index的顶层。

我设法解决了这个问题，通过以下代码，它可以很好地工作：

var hamburger = document.getElementById("hamburger");
var hiddenNav = document.getElementById("hidden-nav");

hamburger.addEventListener("click",changeImage);


function changeImage() {
    if (hiddenNav.style.display === "none") {
        hamburger.src = "./images/icon-close.svg";
        hiddenNav.style.display = "block";
    }
    else {
        hamburger.src = "./images/icon-hamburger.svg";
        hiddenNav.style.display = "none";
    }
}

不确定为什么以及如何正常运行，而另一个则不行，但这已解决，这很重要。

感谢大家的建议。

javascript src src