Vanilla JS手机菜单适用于Chrome，但不适用于Firefox或Edge（不切换）

问题描述：

我使用以下代码in my site在等于或小于768px的视口中显示移动菜单。Vanilla JS手机菜单适用于Chrome，但不适用于Firefox或Edge（不切换）

该代码在Chrome中运行得非常好，但不在Firefox和Edge中，在调整大小后，菜单不会打开（不切换）。为什么？

document.addEventListener('DOMContentLoaded',()=>{ 

    let clicks = 0; 
    let menu = document.querySelector('#menu-mainmenu'); // Menu identifier. 
    let menuButton = document.querySelector('.menuButton'); // Button class in pagebuilder. 

    let mobileBehavior =()=>{ 
     menu.style.display = 'none'; 
     menuButton.addEventListener('click',()=>{ 
      clicks++; 
      if (clicks % 2) { 
       menu.style.display = 'block'; 
      } else { 
       menu.style.display = 'none'; 
      } 
     }); 
    }; 

    if (window.innerWidth <= 768) { 
     mobileBehavior(); 
    } 

    // Event cleanups: 

    window.addEventListener('resize',()=>{ 
     if (window.innerWidth <= 768) { 
      clicks = 1; // Prevent menuButton double clicking. 
      mobileBehavior(); // Display mobile menu both on bootstrapping and resize. 
     } else if (window.innerWidth >= 769) { 

      menu.style.display = 'block'; // Prevent display:none by mobile mode. 
     } 
    }); 

});

注意：没有控制台错误。

答

每次调整你的单击事件添加到同一菜单元素，所以你应该采取addEventListener外mobileBehavior功能的，只是执行的是mobileBehavior函数来显示或隐藏菜单画面，但没有时间附加事件监听器，因为它可能会将监听器重载到菜单。

试试这个：

document.addEventListener('DOMContentLoaded',()=>{ 

    let clicks = 0; 
    let menu = document.querySelector('#menu-mainmenu'); // Menu identifier. 
    let menuButton = document.querySelector('.menuButton'); // Button class in pagebuilder. 

menuButton.addEventListener('click',()=>{ 
      clicks++; 
      if (clicks % 2) { 
       menu.style.display = 'block'; 
      } else { 
       menu.style.display = 'none'; 
      } 
     }); 

    let mobileBehavior =()=>{ 
     menu.style.display = 'none'; 
    }; 

    if (window.innerWidth <= 768) { 
     mobileBehavior(); 
    } 

    // Event cleanups: 

    window.addEventListener('resize',()=>{ 
     if (window.innerWidth <= 768) { 
      clicks = 1; // Prevent menuButton double clicking. 
      mobileBehavior(); // Display mobile menu both on bootstrapping and resize. 
     } else if (window.innerWidth >= 769) { 

      menu.style.display = 'block'; // Prevent display:none by mobile mode. 
     } 
    }); 

});

这里有一个工作示例代码Demo

Vanilla JS手机菜单适用于Chrome，但不适用于Firefox或Edge（不切换）

相关推荐