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" )

Answer 2

使用此行

if(el.style.marginLeft=="-260px") {

您正在检查元素的内联样式是否为特定值。但是，此样式在css中设置。我建议在菜单中添加className以展开它。您可以检查此类名并相应地添加/删除它：

  if ( el.className == "expanded" ) {
     el.className = "";
  } else {
     el.className = "expanded";
  }

添加到css：

#menubalk.expanded {
    margin-left:0;
}

Answer 3

element.style仅搜索内联样式，以获得可以使用的实际样式getComputedStyle

即。
if ( window.getComputedStyle(el).marginLeft=="-260px" ) {...

参考：https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle

注意：对于IE，这仅适用于IE9或更高版本。

Answer 4

你说你在某个地方设置了JavaScript的菜单样式，但我实际上建议你在初始化时使用它，而不是用CSS设置左边距。

我怀疑（没有一个例子很难看到）在第一次点击时JavaScript会直接进入else条件，因为它没有意识到你已经在CSS（或其他地方）设置了边距。然后在第二次单击时，JavaScript已用于设置左边距，以便它可以读取并执行相应的操作。

Javascript样式切换不会首先单击

4 个答案: