Javascript onClick (), требующий нескольких кликов

Question

Доброе утро -

Я прочитал несколько постов с очень похожей проблемой, но не могу найти приемлемое решение.Мой 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";
          }
        });
      }
  }

PS У меня есть еще одна проблема, но она не имеет никакого приоритета, когда я прячу свою сторонуNavэто имеет тенденцию толкать контент вниз и неприглядно.Я знаю, что могу увеличить размер навигации, и это решит эту проблему, но я бродил, если есть какой-либо другой способ исправить это.Опять же, для меня это не является приоритетом, но я решил спросить здесь, а не делать еще один пост позже.

Answer 1

Просто удалите атрибут onclick раскрывающегося элемента в вашем HTML и добавьте следующую строку в конце вашего кода:

addEventListener("load", collapseButton);

Answer 2

  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 может вызвать вашу функцию collapseButton, как описано выше.Но не забудьте удалить оператор onclick в вашем html-файле, как показано ниже.

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

Answer 3

Причина, по которой это происходит, в том, что боковая панель не имеет начального значения 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';
}

CodePen

Вы можете сделать что-то подобное для своегоВыпадающие.