javascript - Javascript onClick()需要多次点击

早上好 -

我已经阅读了多个帖子，与我的问题非常相似，但仍然找不到可行的解决方案。我的sideNav需要先单击一下，然后才能开始使用每次点击，下拉框要求我双击后才能进行任何操作。我一直在尝试修复此问题几天，希望这里有人可以提供帮助。

我在下面附加了我的代码。感谢大家抽出宝贵时间为您提供帮助。

https://codepen.io/Bryant_Mitchell/pen/KKPbQLy

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

附言我遇到的另一个问题是，但它没有任何优先级，当隐藏我的sideNav时，它倾向于将内容压低并且难看。我知道我可以增加导航的大小，它将解决此问题，但是我在徘徊是否还有其他解决方法。同样，这对我来说并不是真正的优先事项，但我想我会在这里问，而不是稍后再发表。

最佳答案

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

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

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