gpt4 book ai didi

javascript - 一键处理多项操作

转载 作者:行者123 更新时间:2023-11-30 18:01:12 25 4
gpt4 key购买 nike

按钮元素调用包含图像的弹出菜单,这可以正常工作。我一直在尝试创建第二个事件监听器,以在第二次单击同一按钮后将样式更改为 display:none 。我尝试的每一种组合似乎都会禁用或取消我已经完成的工作。我是 Javascript 的新手,非常感谢您的帮助。

<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width;" />
<link href="scripts/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
window.onload = function(n) {
document.getElementById('menubutton').addEventListener("click", function({
document.getElementById("mainmenu").style.display="block";}, false);
}
</script>

</head>

<div align="center"><IMG SRC="images/m.index.png" WIDTH=640 HEIGHT=125></div>
<div align="center "id="menubutton"><img src="images/m.icon1.png">Main Menu</div>
<div id="mainmenu" style="display:none">
<div class="row1">
<a href='m.page1.html'><IMG SRC="images/m.icon2.png">Sub Menu 1</a>
</div>
<div class="row2">
<a href='m.page2.html'><IMG SRC="images/m.icon3.png">Sub Menu 2</a>
</div>
<div class="row3">
<a href='m.page3.html'><IMG SRC="images/m.icon4.png">Sub Menu 3</a>
</div>
</div>
</body>
</html>

最佳答案

您不需要第二个监听器。如果菜单可见或不可见,只需使用您必须检查的那个:

document.getElementById('menubutton').addEventListener("click", function()
{
menu = document.getElementById("mainmenu");
if (menu.style.display == "none") {
document.getElementById("mainmenu").style.display="block";
} else {
document.getElementById("mainmenu").style.display="none";
}
}, false);

查看此 jsfiddle .

您也可以使用 jquery,这会让生活更轻松一些。那么你会:

$('#mainmenu').click(function() { $('#mainmenu').toggle() });

关于javascript - 一键处理多项操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16959811/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com