Event Listener not firing on mobile-CodePudding

Hamburger working on desktop, but not triggering on mobile.

I have tried adding another event listener for 'touchstart' but that doesn't seem to do anything either.

const menuBtn = document.querySelector('.hambody');
let menuOpen = false;

menuBtn.addEventListener('click', () => {
  if (!menuOpen) {
    menuBtn.classList.add('open');
    menuOpen = true;
    console.log('triggered')
  } else {
    menuBtn.classList.remove('open');
    menuOpen = false;
    console.log('triggered')
  }
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (min-width:1024px) {
  .hambody {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    z-index: 1000000000000;
  }
}

@media(max-width:1024px) {
  .hambody {
    display: flex;
    justify-content: end;
    align-items: flex-end;
    height: 60px;
    z-index: 1000000000000;
  }
}

.menu-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  /* border: 3px solid #fff; */
}

.menu-btn__burger_1 {
  width: 50px;
  height: 2px;
  background: #A67E51;
  border-radius: 0px;
  transition: all .5s ease-in-out;
}

.menu-btn__burger_2 {
  content: '';
  position: absolute;
  width: 50px;
  height: 2px;
  background: #A67E51;
  border-radius: 0px;
  transition: all .5s ease-in-out;
}

.menu-btn__burger {}

.menu-btn__burger_1 {
  transform: translateY(-15px);
}


/* ANIMATION */

.menu-btn.open .menu-btn__burger_1 {
  transform: translateY(-5px) rotate(-30deg);
}

.menu-btn.open .menu-btn__burger_2 {
  transform: translateY(5px) rotate(30deg);
}

.menu-btn.open .menu-btn__burger {
  transform: rotate(-20deg);
}

.menu-btn.open .menu-btn__burger::after {
  transform: rotate(20deg);
}

<div >
  <a href="#menu-popup">
    <div >
      <div ></div>
      <div ></div>
    </div>
  </a>
</div>

Live Site: https://dev7.devbot.co.za

CodePudding user response：

the problem is because you add .open class to .hambody element , while in css codes the animation start on .menu-btn.open and you should add open class to .main-btn .

const menuBtnLink = document.querySelector('.hambody');
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;

menuBtnLink.addEventListener('click', () => {
  if (!menuOpen) {
    menuBtn.classList.add('open');
    menuOpen = true;
    console.log('triggered')
  } else {
    menuBtn.classList.remove('open');
    menuOpen = false;
    console.log('triggered')
  }
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (min-width:1024px) {
  .hambody {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    z-index: 1000000000000;
  }
}

@media(max-width:1024px) {
  .hambody {
    display: flex;
    justify-content: end;
    align-items: flex-end;
    height: 60px;
    z-index: 1000000000000;
  }
}

.menu-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  /* border: 3px solid #fff; */
}

.menu-btn__burger_1 {
  width: 50px;
  height: 2px;
  background: #A67E51;
  border-radius: 0px;
  transition: all .5s ease-in-out;
}

.menu-btn__burger_2 {
  content: '';
  position: absolute;
  width: 50px;
  height: 2px;
  background: #A67E51;
  border-radius: 0px;
  transition: all .5s ease-in-out;
}

.menu-btn__burger {}

.menu-btn__burger_1 {
  transform: translateY(-15px);
}


/* ANIMATION */

.menu-btn.open .menu-btn__burger_1 {
  transform: translateY(-5px) rotate(-30deg);
}

.menu-btn.open .menu-btn__burger_2 {
  transform: translateY(5px) rotate(30deg);
}

.menu-btn.open .menu-btn__burger {
  transform: rotate(-20deg);
}

.menu-btn.open .menu-btn__burger::after {
  transform: rotate(20deg);
}

<div >
  <a href="#menu-popup">
    <div >
      <div ></div>
      <div ></div>
    </div>
  </a>
</div>

CodePudding user response：

As evolutionxbox suggests, use a button:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (min-width:1024px) {
  .hambody {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    z-index: 1000000000000;
  }
}

@media(max-width:1024px) {
  .hambody {
    display: flex;
    justify-content: end;
    align-items: flex-end;
    height: 60px;
    z-index: 1000000000000;
  }
}

.menu-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  /* border: 3px solid #fff; */
}

.menu-btn__burger_1 {
  width: 50px;
  height: 2px;
  background: #A67E51;
  border-radius: 0px;
  transition: all .5s ease-in-out;
}

.menu-btn__burger_2 {
  content: '';
  position: absolute;
  width: 50px;
  height: 2px;
  background: #A67E51;
  border-radius: 0px;
  transition: all .5s ease-in-out;
}

.menu-btn__burger {}

.menu-btn__burger_1 {
  transform: translateY(-15px);
}


/* ANIMATION */

.menu-btn.open .menu-btn__burger_1 {
  transform: translateY(-5px) rotate(-30deg);
}

.menu-btn.open .menu-btn__burger_2 {
  transform: translateY(5px) rotate(30deg);
}

.menu-btn.open .menu-btn__burger {
  transform: rotate(-20deg);
}

.menu-btn.open .menu-btn__burger::after {
  transform: rotate(20deg);
}

<div >
  <button onclick="querySelector('.menu-btn').classList.toggle('open')">
    <div >
      <div ></div>
      <div ></div>
    </div>
  </button>
</div>