时间戳

首页 > 解决方案 > 指针事件不会通过 javascipt 切换？

javascript - 指针事件不会通过 javascipt 切换？

问题描述

我正在尝试在单击时淡入和淡出下拉菜单。目前使用 CSS 动画将其淡出并使用 JS 切换动画的类。我在js中创建了一个变量来检查对象是否包含淡入淡出类 - 如果元素的类不透明度为0，我希望元素的指针事件设置为无，如果元素是，则设置为全部可见，但变量不会更新并保持为假。我是 JavaScript 新手。

HTML

<button class="mobile__more">+</button>
<div class="mobile__process-nav">
  <a href="#show" data-tab-target="#show" class="mobile__tab">Show</a>
  <a href="#about" data-tab-target="#about" class="mobile__tab">About</a>
   <a href="#researchFilm" data-tab-target="#researchFilm" class="mobile__tab">Research Film</a>
   <a href="#stills" data-tab-target="#stills" class="mobile__tab">Stills</a>
   <a href="#lookbook" data-tab-target="#lookbook" class="mobile__tab">Lookbook</a>
</div>

css

.mobile__process-nav {
   display:flex;
   flex-direction: column;
   justify-content: space-evenly;
   height: 30vh;
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
   -moz-transition: opacity 0.3s ease-in-out;
   -webkit-transition: opacity 0.3s ease-in-out;
   -ms-transition: opacity 0.3s ease-in-out;
   -o-transition: opacity 0.3s ease-in-out;
}

.mobile__process-nav.fade {
   opacity: 1;
}

JS

const morebtn = document.querySelector('.mobile__nav');
const processMenu = document.querySelector('.mobile__process-nav');
if (window.matchMedia("(max-device-width: 850px)").matches) {

let menuOpen = processMenu.classList.contains('fade');

   morebtn.addEventListener('click', () => {
      processMenu.classList.toggle('fade');
      if (!menuOpen) {
         console.log(menuOpen);
         processMenu.style.pointerEvents = "none";
      } else {
         console.log(menuOpen);
         processMenu.style.pointerEvents = "all";
      }
})
}

标签： javascripthtmlcss

解决方案

menuOpen您应该更新点击回调中的变量

推荐阅读