Question

我有这两个触发相同功能的图像。该功能的作用是显示/隐藏其中一张图像，然后我添加了一些额外的代码来显示/隐藏菜单（我没有提供）。

function menu() {
  var b = document.getElementById("burger");
  var c = document.getElementById("close");
  if (b.style.display === "block") {            
      b.style.display = "none";
      c.style.display = "block";
  } else {
      b.style.display = "block";
      c.style.display = "none";
  }
}

<img src="img/burger-white.png" id="burger" onclick="menu()" alt="img1">
<img src="img/close-white.png" id="close" onclick="menu()" alt="img2">

一切正常，除了我第一次单击图像时什么都不做。

Answer 1

看起来汉堡的显示最初并未设置为阻止。尝试加载页面并用chrome检查。在页面加载后，您应该在那里看到它最初是否具有预期的CSS样式。

一种解决方法是，如果窗口大小小于1100像素，则添加一个函数，该函数会将ID为#burger的元素的显示设置为“阻止”。

function setDisplay() {
    var width = window.innerWidth;
    var b = document.getElementById("burger");
    if(width <= 1100) {
        b.style.display = "block";
    }
}

我第二次点击但第一次没有触发Javascript onclick函数

1 个答案: