Vanilla JS手機菜單適用於Chrome，但不適用於Firefox或Edge（不切換）

Question

我使用以下代碼in my site在等於或小於768px的視口中顯示移動菜單。

該代碼在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. 
     } 
    }); 

}); 

注意：沒有控制檯錯誤。

Answer 1

每次調整你的單擊事件添加到同一菜單元素，所以你應該採取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