求助：为移动端实现响应式垂直折叠菜单

Hey there! Let's work through getting that responsive mobile menu sorted—vertical layout on small screens with click-to-expand submenus is totally doable, and here's a practical approach you can adapt to your existing menu:

1. Tweak Your HTML Structure (If Needed) #

First, make sure each main menu heading has a clickable trigger (this could be a <button> or a <span> with tabindex="0" for keyboard accessibility). Wrap your submenu items in a container so we can easily toggle its visibility:

<nav class="main-menu">
  <div class="menu-item">
    <button class="menu-trigger">Main Heading 1</button>
    <ul class="submenu">
      <li><a href="#">Subitem 1</a></li>
      <li><a href="#">Subitem 2</a></li>
    </ul>
  </div>
  <!-- Repeat for other menu items -->
</nav>

2. Use CSS Media Queries for Responsive Layouts #

Keep your desktop menu as-is, then override styles for small screens to switch to vertical layout and hide submenus by default:

/* Desktop styles (keep your existing horizontal layout here) */
.main-menu {
  display: flex;
  gap: 1.5rem;
  /* Your existing desktop menu styles */
}
.submenu {
  display: block;
  /* Your existing desktop submenu styles */
}

/* Mobile styles (adjust breakpoint to match your needs) */
@media (max-width: 768px) {
  .main-menu {
    flex-direction: column;
    gap: 0.5rem;
  }
  .submenu {
    display: none;
    margin-left: 1rem; /* Indent submenus for hierarchy */
    list-style: none;
    padding: 0;
  }
  /* Active class to show submenu when clicked */
  .submenu.active {
    display: block;
  }
}

3. Add JavaScript for Click-to-Expand Logic #

Wire up the trigger buttons to toggle the active class on their corresponding submenus. We'll also add optional logic to close other open submenus when a new one is clicked:

// Grab all menu triggers
const menuTriggers = document.querySelectorAll('.menu-trigger');

menuTriggers.forEach(trigger => {
  trigger.addEventListener('click', () => {
    // Get the next sibling (our submenu)
    const submenu = trigger.nextElementSibling;
    
    // Toggle the active class to show/hide the submenu
    submenu.classList.toggle('active');
    
    // Optional: Close all other open submenus
    menuTriggers.forEach(otherTrigger => {
      if (otherTrigger !== trigger) {
        otherTrigger.nextElementSibling.classList.remove('active');
      }
    });
    
    // Accessibility update: Toggle aria attributes for screen readers
    const isExpanded = submenu.classList.contains('active');
    trigger.setAttribute('aria-expanded', isExpanded);
    submenu.setAttribute('aria-hidden', !isExpanded);
  });
});

// Optional: Add keyboard support (Enter/Space to trigger)
menuTriggers.forEach(trigger => {
  trigger.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      trigger.click();
    }
  });
});

4. Quick Accessibility Wins (Important!) #

Make sure your menu works for all users by updating aria attributes in your HTML:

<button class="menu-trigger" aria-expanded="false" aria-controls="submenu-1">
  Main Heading 1
</button>
<ul id="submenu-1" class="submenu" aria-hidden="true">
  <li><a href="#">Subitem 1</a></li>
  <li><a href="#">Subitem 2</a></li>
</ul>

This helps screen reader users understand the menu's state and structure.

If your existing menu has a different structure (like nested <divs> instead of <ul>), just adjust the CSS selectors and JavaScript element targeting to match. The core idea stays the same: use media queries to switch layout on mobile, and toggle a class with JavaScript to show/hide submenus when the main heading is clicked.

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