Меню выводится лишь когда я кликаю 2 раза по кнопке

Question

Всё облазил, нигде не нашёл ответа, помогите пожалуйста

document.querySelector('.dropbtn').addEventListener('click', function(e) {
  e.preventDefault();
  if(this.classList.contains('is-active')) {
    console.log('закрыть');
    this.classList.remove('is-active');
    document.querySelector('#dropmenu').classList.remove('show');

  }
  else {
    console.log('открыть');
    this.classList.add('is-active');
    document.querySelector('#dropmenu').classList.add('show');
  }
})

.hamburger-menu {
  cursor: pointer;
  margin-bottom: auto !important;
  margin-top: 10px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 60px;
}
  
.bar,
.bar:after,
.bar:before {
  width: 50px;
  height: 5px;
}
  
.bar {
  position: relative;
  transform: translateY(25px);
  background: white;
  transition: all 0ms 300ms;
}
.bar.animate {
  background: rgba(255, 255, 255, 0);
}
  
.bar:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 15px;
  background: white;
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
  
.bar:after {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  background: white;
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
  
.bar.animate:after {
  top: 0;
  transform: rotate(45deg);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
  
.bar.animate:before {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

<div class="hamburger-menu ml-auto">
   <button class="bar dropbtn"></button>
</div>

Answer 1

Не хватает кусков кода с #dropdownmenu, .show поэтому не совсем понятно, что у вас не работает Вот код, для добавления нужных классов к этим элементам при нажатии на кнопку, а при повторном нажатии эти классы будут убираться

JS:

let menu = document.getElementById('dropmenu');

document.querySelector('.dropbtn').addEventListener('click', function () {
  this.classList.toggle('is-active');
  menu.classList.toggle('show');
});

HTML:

 <div class="hamburger-menu ml-auto">
    <button class="bar dropbtn"></button>
 </div>
 <div id="dropmenu">menu items</div>

Answer 2

Проблема решена, всем кто ответил - спасибо. У меня просто был ещё один скрипт для анимации кнопки, в итоге срабатывал сначала он, а потом уже вывод менюшки

БЛОГ НА HUSL

Меню выводится лишь когда я кликаю 2 раза по кнопке

Ответы (2 шт):