汉堡菜单适用于 Firefox，但不适用于基于 chromium 的浏览器

Question

在我的 React 应用程序中，我有一个汉堡菜单，可以在 Firefox 上按预期运行，但在 Chrome 上不起作用，并且我没有收到任何控制台错误。

这里是负责处理汉堡菜单的脚本：

// 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');
                }
            });
        }
    }
});

这是显示它如何放置在我的反应组件中的代码：

        <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>

附上预期行为的屏幕截图：

Answer 1

我建议，尝试简单的逻辑而不是复杂的方法。

例如，当您单击“navbar-burger”图标，然后将“open”类切换到其父 div“min-h-screen”时，现在您可以通过 CSS 控制它。

切换公开课后，以简单的方法执行此操作。

.min-h-screen.open .navbar-menu {
  display: block;
  /* You can also add css smooth transitions if you want */
}

这适用于任何浏览器。