Question

按钮元素调用弹出菜单包括图像，这可以正常工作。我一直在尝试创建第二个事件监听器，在第二次单击相同按钮后将样式更改为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>

Answer 1

您不需要第二个监听器。如果菜单可见，请使用您必须检查的那个：

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() });

Answer 2

你在谈论你的情况下的切换功能

var toggle=function(){
 var menu=document.getElementById("mainmenu");
 menu.style.display=(menu.style.display=='none'?'block':'none');
}
window.onload=function(){
document.getElementById('menubutton').addEventListener("click",toggle,false);
}

因为你可以看到不需要使用jquery，并且正确地编写函数它也是一个'一行'函数。它也比jquery快得多。还有jens建议的函数调用3次getelementbyid ...并且它在第一个getelementbyid上缺少var

但我用现代的方式。

//css
#mainmenu{
 transition:all 700ms ease;
 /*-webkit,-moz,-ms,-o*/
 opacity:0;
}
#mainmenu.show{
 opacity:1;
}

//js
var toggle=function(){
document.getElementById("mainmenu").classList.toggle('show');
}
window.onload=function(){
document.getElementById('menubutton').addEventListener("click",toggle,false);
}

在第二种情况下，我改变不透明度，使其在700毫秒内淡入淡出功能

为什么？

1.animation

2.很容易在不触及js代码的情况下改变css中的动画功能（不透明度，高度，变换......等等）

3.所有现代浏览器上的工作

4.display none会降低浏览器的速度，因为它每次都会呈现菜单。

使用第一种情况的更好方法是使用高度：0px;溢出：隐藏;或margin-top：-999999px;在CSS中它只是隐藏或移动它而不需要重新呈现菜单

使用一个按钮处理多个操作

2 个答案: