Javascript样式切换不'；第一次点击就不能工作

我正在制作一个带有侧边栏菜单的html小应用程序，点击后弹出。它工作正常，只是在第二次单击后才开始工作。第一次单击时，什么也没有发生

CSS:

HTML:

我想我可能还需要在javascript中的某个地方设置边距，但我无法理解

---

非常感谢您的帮助

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

---

我怀疑（如果没有示例，很难看出）在第一次单击时，JavaScript会直接进入else条件，因为它无法识别您已经在CSS（或其他地方）中设置了边距。然后在第二次点击时，JavaScript被用来设置左边距，以便它可以读取并执行相应的操作。

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

---

我怀疑（如果没有示例，很难看出）在第一次单击时，JavaScript会直接进入else条件，因为它无法识别您已经在CSS（或其他地方）中设置了边距。然后在第二次点击时，JavaScript被用来设置左边距，这样它就可以读取并执行相应的操作。

style.marginLeft

正在查看您的内联样式。因为您最初没有定义任何内联样式

style。marginLeft

未定义

要解决此问题，只需反转if/else语句：

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

---

style.marginLeft

正在查看您的内联样式。因为您最初没有定义任何内联样式

style。marginLeft

未定义

要解决此问题，只需反转if/else语句：

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

用这条线

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

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

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

在css中添加以下内容：

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

用这条线

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

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

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

在css中添加以下内容：

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

---

element.style

仅搜索内联样式，要获取实际样式，可以使用

getComputedStyle

i、 e.

if（window.getComputedStyle（el.marginLeft==“-260px”）{…

参考：

---

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

元素。style

仅搜索内联样式，要获取实际样式，可以使用

getComputedStyle

i、 e.

if（window.getComputedStyle（el.marginLeft==“-260px”）{…

参考：

---

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

因为在第一次单击时，if-else中的两条语句都不匹配。当您第一次单击时，调用toggle并设置其中一条，然后由于它现在是if-then情况之一，它开始工作。。尝试将console.log添加到if和else块中。找出它使用的是哪一条首先单击并检查当时的css代码。你会发现。因为在第一次单击时，if-else中的两个语句都不匹配。当你第一次单击时，调用toggle并设置其中一个，然后由于它现在是if-then情况之一，它开始工作。。尝试将console.log添加到if和else块中。找出是哪一个首先点击并检查当时的css代码。你会发现。Jup，反转语句做到了。现在看起来很傻。感谢你的快速回复！Jup，反转语句做到了。现在看起来很傻。感谢你的快速回复！+1我回答了一个快速修复，但类将提供更干净的实现。注意拼写：className+1我的回答是快速修复，但类将提供更简洁的实现