Vue.js响应式导航栏问题：汉堡按钮点击后菜单不显示

1. Fix Nav Menu Display Issue #

The core problem preventing your menu from showing is an incorrect CSS selector. You used .nav-menu:active (which targets the element only while it’s being clicked) instead of .nav-menu.active (which targets the element when it has the active class applied). Update your media query CSS:

@media(max-width:767px) {
  /* ... keep existing styles ... */
  
  /* Replace this line */
  /* .nav-menu:active { left: 0; } */
  
  /* With this */
  .nav-menu.active {
    left: 0;
  }
}

2. Fix Click Event Listener #

Your current window click listener toggles the menu state every time any part of the page is clicked, which is unintended. Modify it to only trigger when the hamburger icon is clicked:

<script>
export default {
  setup() {
    const toggleMenu = (event) => {
      // Only run if the click originates from the hamburger or its children
      if (!event.target.closest('.hamburger')) return;
      
      const hamburger = document.querySelector(".hamburger");
      const navMenu = document.querySelector(".nav-menu");

      hamburger.classList.toggle("active");
      navMenu.classList.toggle("active");
    };
    
    window.addEventListener("click", toggleMenu);
    
    // Clean up the event listener when the component unmounts
    return () => window.removeEventListener("click", toggleMenu);
  }
}
</script>

3. Vue Best Practice: Use Refs Instead of document.querySelector #

For better Vue integration and reactivity, replace direct DOM queries with template refs:

Update the template to add refs:

<template>
  <header>
    <nav class="navbar">
      <img style="width: 100px; border-radius: 50%;" src="../../" alt="Name here">
      <a href="/" class="nav-branding text-center">Name</a>
      <ul class="nav-menu" ref="navMenu">
        <!-- ... menu items ... -->
      </ul>
      <div class="hamburger" ref="hamburger">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
    </nav>
  </header>
</template>

Update the script to use refs:

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const hamburger = ref(null);
    const navMenu = ref(null);
    
    const toggleMenu = (event) => {
      if (!event.target.closest('.hamburger')) return;
      
      hamburger.value.classList.toggle("active");
      navMenu.value.classList.toggle("active");
    };
    
    onMounted(() => window.addEventListener("click", toggleMenu));
    onUnmounted(() => window.removeEventListener("click", toggleMenu));
    
    return { hamburger, navMenu };
  }
}
</script>

Regarding the Codepen ToggleIcon Issue #

Common reasons the ToggleIcon might not display include:

• Missing component registration: Ensure the ToggleIcon component is imported and registered in your Vue app.
• CSS conflicts: Check if custom styles are hiding the icon (e.g., display: none or opacity: 0).
• Version mismatches: The Codepen may rely on specific Vue versions or dependencies not present in your project.

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