个人中心
gpt4 book ai didi

javascript - 通过 Javascript 切换菜单按钮

转载 作者：行者123 更新时间：2023-11-28 19:09:50 24 4
gpt4 key购买 nike

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

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

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>

最佳答案

getElementsByClassName("菜单图标").onClick

应该是

getElementsByClassName("菜单图标")[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";
};

关于javascript - 通过 Javascript 切换菜单按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30918239/

24 4 0
文章推荐： javascript - 从 javascript 中的自定义属性中选择一个值
文章推荐： javascript - 当通过 HTML 文件包含在 PHP 中时，AJAX Post 不再工作
文章推荐： python - T2.micro running python scraper - 无法控制的CPU
文章推荐： javascript - 用正则表达式替换字符串，即奇怪的结果