Javascript onClick（）需要多次单击

早上好-

我读过多篇与我的问题非常相似的帖子，但我仍然无法找到可行的解决方案。我的sideNav需要在每次点击之前进行初始点击，我的下拉框要求我在任何事情发生之前双击。几天来，我一直在试图解决这个问题，希望这里的人能帮上忙

我在下面附上了我的代码。感谢大家抽出时间来帮助我们

---

另外，我还有一个问题，但它没有任何优先权，当隐藏我的sideNav时，它倾向于向下推内容，并且不美观。我知道我可以增加导航的大小，它会解决这个问题，但我想知道是否有其他方法来解决它。同样，这对我来说并不是一个优先考虑的问题，但我想我应该在这里提问，而不是稍后再发表另一篇文章。

只需删除HTML中下拉元素的onclick属性，并在代码末尾添加以下行：

addEventListener("load", collapseButton);

---

发生这种情况的原因是侧边栏没有初始的style.width值。您查询的是内联样式值，而不是

此代码：

sideBar.style.width === "250px" ? '0' : '250px';

这就是问题所在。第一次运行时，侧边栏没有内联宽度值。当您第一次单击它时，它将获得一个250px的内联样式值。您可以通过计算计算的宽度而不是内联宽度来跳过此步骤：

function sideBar() {
  var sideBar = document.getElementById("sideBar");
  var main = document.getElementById("main");
  var sidebarWidth = getComputedStyle(sideBar).width;
  var mainMargin = getComputedStyle(main).marginLeft;
  sideBar.style.width = sidebarWidth === "250px" ? '0' : '250px';
  main.style.marginLeft = mainMargin  === "250px" ? '0' :  '250px';
}

您可以对下拉列表执行类似的操作

  function sideBar() {

  var sideBar = document.getElementById("sideBar"),
  main = document.getElementById("main");
  sideBar.style.width = sideBar.style.width === "250px" ? '0' : '250px';
  main.style.marginLeft = main.style.marginLeft === "250px" ? '0' : '250px';

  }



function collapseButton() {

  var coll = document.getElementsByClassName("dropdown");
  var i;
  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    });
  }



 }

  addEventListener("load", collapseButton);

AddVntListner可以像上面那样调用collapseButton函数。 但请记住删除html文件中的onclick语句，如下所示

<button type="button" class="dropdown" >Projects</button>

---

这仍然迫使我双击下拉列表以激活它。您是否删除了onclick=collapseButton属性？我确实删除了它。不幸的是，它似乎仍然无法解决问题。这应该可以解决问题+1感谢您不仅提供了解决方案，还提供了解释。不过有一个问题。有没有一个原因导致现在主容器不能左右移动？很抱歉，我的目标是主元素的宽度，而不是左边距。现在就试试吧，非常感谢！这是你解决的两个问题之一。我非常感激！我将在我的下拉列表中实现类似的解决方案！做了，做了！我想我只是得到了maxHeight的计算样式，对吗？是的，没错。如果需要查找要查找的属性的全名，请尝试在控制台中运行getComputedStyledocument.body以获取完整列表。

<button type="button" class="dropdown" >Projects</button>