我正在制作这个带有侧边栏菜单的小 html 应用程序,该菜单会在单击时弹出。它工作正常,只是它只在第二次单击后才开始工作。第一次点击没有任何反应。
CSS:
#menubalk{
margin-left: -260px;
}
HTML:
<div id="menubutton">
<img src="design/images/menu.png" id="menu" onclick="toggle()" alt=""/>
</div>
<div id="menubalk">
<h5>Menu</h5>
</div>
Javascript:
function toggle () {
var el = document.getElementById("menubalk");
var kop = document.getElementById("kop");
var pag = document.getElementById("pagina");
if ( el.style.marginLeft=="-260px" ) {
el.style.marginLeft="0px";
kop.style.marginLeft="260px";
pag.style.marginLeft="260px";
} else {
el.style.marginLeft="-260px";
kop.style.marginLeft="0px";
pag.style.marginLeft="0px";
}
}
我想我可能还必须在 javascript 中的某处设置边距,但我无法弄清楚。
非常感谢所有帮助!
最佳答案
style.marginLeft
正在查看您的内联样式。由于您最初没有定义任何内联样式,因此 style.marginLeft
未定义。
要解决这个问题,您可以简单地反转您的 if/else 语句:
if ( el.style.marginLeft=="0px" )
关于Javascript 样式切换不起作用第一次单击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15097755/