1

按钮元素调用包括图像的弹出菜单，这可以正常工作。我一直在尝试创建第二个事件侦听器，以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>
4

2 回答 2

2

您不需要第二个听众。只需使用您必须检查的菜单是否可见：

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() });
于 2013-06-06T10:37:34.823 回答
0

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

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.动画

2.无需接触js代码即可轻松更改css中的动画功能（不透明度，高度，变换......随便）

3.适用于所有现代浏览器

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

使用第一种情况的更好方法是使用 height:0px;overflow:hidden; 或边距顶部：-999999px；在 css 中，因为它只是隐藏或移动它而无需重新渲染菜单

于 2013-06-06T11:37:51.777 回答