Question

我试图按下按钮（.menu-icon）以切换菜单（#menu），但失败了。（我拿了＆＃34; lorem菜单文本＆＃34;作为一个例子。）请看下面的代码。

我认为Javascript代码中存在一些错误，但我不太确定。此外，如果您有更好的解决方案，无论是Javascript还是HTML，请将其作为答案发布，我将不胜感激。

＆＃13;

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";}
};

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

getElementsByClassName("menu-icon").onClick

应该是

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

因为getElementsByClassName会返回元素列表 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

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

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

2 个答案: