按 Javascript 切换菜单按钮

Question

我试图制作一个按钮 (.menu-icon) 来切换菜单 (#menu)，但它失败了。（我以 "lorem menu text" 为例。）请看下面我的代码。

我认为 Javascript 代码中有一些错误，但我不太确定。此外，如果您对此有更好的解决方案，Javascript 或 HTML，请 post 作为答案，我将不胜感激。

var click=0;

document.getElementsByClassName("menu-icon").onClick = function(){
 click += 1;
 if (click %2 === 1) {document.getElementById("menu").style.visibility = "visible";}
 else {document.getElementById("menu").style.visibility = "hidden";}
};

#menu {
 visibility: hidden;
}

.menu-icon {
  position: relative;
  padding-left: 1.25em;
}

.menu-icon:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1em;
  height: 0.15em;
  background: black;
  box-shadow: 
    0 0.25em 0 0 black,
    0 0.5em 0 0 black;
}

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8" />
</head>
<body>
  <main>
    <a href="#menu" class="menu-icon"></a>
    <section id="menu">lorem menu text</section>
  </main>
</body>
</html>

Answer 1

getElementsByClassName("menu-icon").onClick

应该是

getElementsByClassName("menu-icon")[0].onclick

因为getElementsByClassNamereturns一个元素列表NodeList。 onclick 等事件必须小写。

您也可以使用 Ternary operator 的简单条件，例如：

document.getElementsByClassName("menu-icon")[0].onclick = function(){
  var element = document.getElementById("menu");
  element.style.visibility = element.style.visibility == "visible" ? "hidden" : "visible";
};

Answer 2

为了扩展上面的答案，您的代码也可以通过测试当前样式声明中设置的可见性属性来简化：

var toggle = document.getElementsByClassName("menu-icon")[0];
var menu = document.getElementById("menu");

toggle.onclick = function(){
    var hidden = menu.style.visibility === "hidden";
    menu.style.visibility = hidden ? "visible" : "hidden";
};

演示：https://jsfiddle.net/z8zdgew7/

按 Javascript 切换菜单按钮

Toggling menu button by Javascript

html

javascript

togglebutton