React应用汉堡菜单Firefox正常、Chromium系浏览器失效问题排查

React应用中的汉堡菜单在Firefox浏览器可正常触发，但Chrome等Chromium内核浏览器中点击无反应，控制台无错误输出。

汉堡菜单处理脚本 #

// Burger menus
document.addEventListener('DOMContentLoaded', function() {
    // open
    const burger = document.querySelectorAll('.navbar-burger');
    const menu = document.querySelectorAll('.navbar-menu');

    if (burger.length && menu.length) {
        for (var i = 0; i < burger.length; i++) {
            burger[i].addEventListener('click', function() {
                for (var j = 0; j < menu.length; j++) {
                    menu[j].classList.toggle('hidden');
                }
            });
        }
    }

    // close
    const close = document.querySelectorAll('.navbar-close');
    const backdrop = document.querySelectorAll('.navbar-backdrop');

    if (close.length) {
        for (var i = 0; i < close.length; i++) {
            close[i].addEventListener('click', function() {
                for (var j = 0; j < menu.length; j++) {
                    menu[j].classList.toggle('hidden');
                }
            });
        }
    }

    if (backdrop.length) {
        for (var i = 0; i < backdrop.length; i++) {
            backdrop[i].addEventListener('click', function() {
                for (var j = 0; j < menu.length; j++) {
                    menu[j].classList.toggle('hidden');
                }
            });
        }
    }
});

React组件部署代码 #

<nav className='lg:hidden flex items-center justify-between p-8 bg-gray-700 mb-3'>
  <Link className='inline-flex items-center h-8' to='/'>
    <img
      src='images/l.png'
      alt=''
    />
  </Link>
  <div className='w-full xl:w-auto px-2 xl:mr-12'>
    <div className='flex items-center justify-between'>
      <div className='xl:hidden' />
    </div>
  </div>
  <button className='navbar-burger p-2 text-gray-400 hover:text-gray-300 focus:outline-none'>
    <svg
      width={20}
      height={12}
      viewBox='0 0 20 12'
      fill='none'
      xmlns='http://www.w3.org/2000/svg'
    >
      <title>Mobile menu</title>
      <path
        d='...removed...' 
        fill='currentColor'
      />
    </svg>
  </button>
</nav>

预期效果 #

内容的提问来源于stack exchange，提问作者iamDyeus