12Vadim12
@12Vadim12

Как повесить класс active на элемент?

<div class="header__burger-main">
        <span class="header__burger-firstline"></span>
        <span class="header__burger-secondline"></span>
        <span class="header__burger-thirdline"></span>
      </div>

.header__burger-main{
  display: block;
  position: relative;
  margin-left: 8px;
  padding: 14px 12px;
  cursor:pointer;
  max-height: 12px;

}
.header__burger-firstline,
.header__burger-secondline,
.header__burger-thirdline{
  display: block;
  position: absolute;
  height: 3px;
  background: #000;
  border-radius: 25px;
}
.header__burger-firstline {
  top:0;
  width: 16px;
}
.header__burger-firstline.active{
  transform: rotate(45deg);
  top:13px;
}
.header__burger-secondline {
  top:12px;
  width: 8px;
}
.header__burger-secondline.passive{
  display: none;
}
.header__burger-thirdline {
  width: 16px;
  bottom: 6px;
}
.header__burger-thirdline.active {
  transform: rotate(-45deg);
  bottom: 13px;
}

const burgerFirst = document.querySelector('.header__burger-firstline');
const burgerSecond = document.querySelector('.header__burger-secondline');
const burgerThird = document.querySelector('.header__burger-thirdline');
const elemTest = document.querySelector('.header__burger-main');
elemTest.addEventListener('click', function(){
  burgerFirst.classList.toggle('active');
  burgerSecond.classList.toggle('passive');
  burgerThird.classList.toggle('active');
});
  • Вопрос задан
  • 78 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы