Javascript 样式切换不起作用第一次单击

Question

我正在制作这个带有侧边栏菜单的小 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 中的某处设置边距，但我无法弄清楚。

非常感谢所有帮助!

Answer 1

style.marginLeft 正在查看您的内联样式。由于您最初没有定义任何内联样式，因此 style.marginLeft 未定义。

要解决这个问题，您可以简单地反转您的 if/else 语句:

if ( el.style.marginLeft=="0px" )