我的手机菜单已经疯了，我看不懂

Question

我正在构建一个登陆页面，但我的移动菜单变得疯狂，我可以修复它。我不知道它出了什么问题，我找不到 js、html 或 css 的任何问题。

这是 NAV html：

    <nav class="menux glassmorphism-nav p-4z backdrop-blur-2xl backdrop-saturation-100 backdrop-contrast-100">
      <div class="container mx-auto flex flex-wrap justify-between items-center">
        <div class="text-3xl font-bold logo-fire subpixel-antialiased" aria-labelledby="Explode Logo"><h4 data-value="EXPLODE">EXPLODE</h4></div>
        <ul class="hidden md:flex md:space-x-6">
          <li><a href="#top" class="text-center transition menulinks font-bold subpixel-antialiased" aria-labelledby="Home"><h4>HOME</a></li>
          <li><a href="#about" class="text-center transition menulinks font-bold subpixel-antialiased" aria-labelledby="About">ABOUT</a></li>
          <li><a href="#artists" class="text-center transition menulinks font-bold subpixel-antialiased" aria-labelledby="Artists">ARTISTS</a></li>
          <li><a href="#join" class="text-center transition menulinks font-bold subpixel-antialiased" aria-labelledby="Join">JOIN</h4></a></li>
          <li><a href="#apps" class="text-center transition menulinks font-bold subpixel-antialiased" aria-labelledby="Join">APPS</h4></a></li>
        </ul>
        <div class="flex items-center">
          <label aria-label="Dark Mode Toggle" class="toggle-switch">
            <input type="checkbox" id="darkModeToggle">
            <span class="toggle-slider touch-auto">
              <span class="toggle-icons">
                <span class="sun-icon">☀️</span>
                <span class="moon-icon">🌙</span>
              </span>
            </span>
          </label>
          <button id="menu-toggle" class="md:hidden mm-icon ml-4 touch-auto subpixel-antialiased">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="mobile-menu md:hidden mt-4" id="moblie-menu">
        <ul class="space-y-2">
          <li><a href="#top" class="block py-2 text-center transition mobile-links touch-auto" aria-label="Home">HOME</a></li>
          <li><a href="#about" class="block py-2 text-center transition mobile-links touch-auto" aria-label="About">ABOUT</a></li>
          <li><a href="#artists" class="block py-2 text-center transition mobile-links touch-auto" aria-label="Artists">ARTISTS</a></li>
          <li><a href="#join" class="block py-2 text-center transition mobile-links touch-auto" aria-label="Join">JOIN</a></li>
          <li><a href="#apps" class="block py-2 text-center transition mobile-links touch-auto" aria-label="Apps">APPS</a></li>
        </ul>
      </div>
    </nav>

这是 JavaScript：

  <script>
    document.getElementById('menu-toggle').addEventListener('click', function() {
      document.querySelector('.mobile-menu').classList.toggle('active');
    });

    // Dark mode toggle functionality
    const darkModeToggle = document.getElementById('darkModeToggle');
    const body = document.body;

    // Check for saved theme preference or default to light mode
    if (localStorage.getItem('darkMode') === 'enabled') {
      body.classList.add('dark');
      darkModeToggle.checked = true;
    }

    darkModeToggle.addEventListener('change', function() {
      if (this.checked) {
        body.classList.add('dark');
        localStorage.setItem('darkMode', 'enabled');
      } else {
        body.classList.remove('dark');
        localStorage.setItem('darkMode', 'disabled');
      }
    });

    // Smooth scroll for the "Explore Now" button
    document.querySelector('a[href="#main-content"]').addEventListener('click', function(e) {
      e.preventDefault();
      document.querySelector(this.getAttribute('href')).scrollIntoView({
        behavior: 'smooth'
      });
    });
  </script>

移动链接和菜单链接仅用于样式。

感谢所有帮助，我花了 2 个小时试图解决这个问题。

Answer 1

我明白了，补充一下

@media (max-width: 768px) {
  .mobile-menu {
    display: none;
  }
  .mobile-menu.active {
    display: block;
  }
}

到样式.css