事件侦听器未在移动设备上触发

用户2730011

汉堡包在桌面上工作,但在移动设备上不触发。

我尝试为“touchstart”添加另一个事件侦听器,但这似乎也无济于事。

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 class="hambody">
  <a href="#menu-popup">
    <div class="menu-btn">
      <div class="menu-btn__burger_1"></div>
      <div class="menu-btn__burger_2"></div>
    </div>
  </a>
</div>

直播网站:https ://dev7.devbot.co.za

艾哈迈德 MRF

问题是因为您将.open类添加到.hambody元素,而在css代码中动画开始.menu-btn.open,您应该将open类​​添加到.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 class="hambody">
  <a href="#menu-popup">
    <div class="menu-btn">
      <div class="menu-btn__burger_1"></div>
      <div class="menu-btn__burger_2"></div>
    </div>
  </a>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

事件侦听器未在 DIV 中的第二个按钮上触发

DOMAttrModified事件侦听器未在Android WebView中触发

读取事件侦听器未在本机反应中触发

Reosurce触发的事件将更改侦听器移动

DOMContentLoaded上的事件侦听器随机触发

jQuery / JavaScript OnClick事件未在移动设备上触发

React Click事件未在移动设备上触发

jQuery事件侦听器多次触发

Javascript 事件侦听器未触发

为什么在注册事件侦听器并触发事件侦听器之前调用滚动事件?

如何在尚未在 DOM [no-jQuery] 中的元素上添加事件侦听器?

父节点上的事件侦听器也在所有子节点上触发

画布在事件侦听器上消失

Symfony(5.1)主义事件侦听器被触发,但实体侦听器未触发

ContextStartedEvent未在自定义侦听器中触发

在事件触发后添加事件侦听器“加载”

Mousenter事件侦听器在元素内移动鼠标时触发多次,但仅在更新innerHTML时触发

仅在滚动事件侦听器上触发警报一次,直到页面重新加载

异步等待函数未在事件侦听器中执行

for循环未在单值事件侦听器中运行

是否使用“ .click()”异步触发事件侦听器?

dispatchEvent不触发jQuery.on()事件侦听器

webRTC ondatachannel() 和 onopen() 事件侦听器未触发

复选框事件侦听器未触发

创建事件侦听器时,函数会立即触发

全局范围-触发事件侦听器后访问“ this”

Laravel Livewire事件侦听器未触发

触发事件侦听器后延迟执行

如何准确识别事件侦听器触发的元素?