Javascript 指针事件赢了'；不通过javascipt切换？

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

HTML

JS

---

您应该在click callback中更新变量

menuOpen

，切换类后，您需要检查元素是否具有该类。现在，您只在脚本初始化时进行检查，因此

menuOpen

将保留此时的值。是否应该在if语句中添加切换？@LaiqaMohid move

let menuOpen=processMenu.classList.contains（'fade'）到回调，所以在第行：
morebtn.addEventListener（'click'，（）=>{
这解决了问题，谢谢！
<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>

.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;
}

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";
      }
})
}