Vue.js侧边栏子菜单自动关闭及互斥展开功能实现咨询

Hey Rayy, let's sort out those two sidebar problems you're dealing with—they're totally solvable with a few tweaks to your menu state logic!

Problem 1: Needing two clicks to close a submenu #

This usually happens because your toggle logic isn't properly checking if the submenu is already open. Instead of flipping a boolean directly, you should explicitly compare the currently open menu's identifier to the one you're clicking.

Problem 2: Auto-close other open submenus when clicking a new menu #

The key here is to track only one "active" submenu at a time. Instead of having individual booleans for each menu's open state, use a single variable to store the ID/key of the currently expanded menu.

Example Implementation (React) #

Let's use a simple React component to demonstrate the fix:

import { useState } from 'react';

const Sidebar = () => {
  // Track the key of the currently expanded submenu (null means no submenu is open)
  const [expandedMenuKey, setExpandedMenuKey] = useState(null);

  const handleMenuClick = (menuKey) => {
    // Toggle logic: if clicking the same menu, close it; else, open it (and close others)
    setExpandedMenuKey(prevKey => 
      prevKey === menuKey ? null : menuKey
    );
  };

  // Sample menu data with children
  const menuItems = [
    { key: 'dashboard', label: 'Dashboard', children: [] },
    { key: 'products', label: 'Products', children: ['All Products', 'Add Product'] },
    { key: 'orders', label: 'Orders', children: ['Pending', 'Completed'] }
  ];

  return (
    <div className="sidebar">
      {menuItems.map(item => (
        <div key={item.key} className="menu-item">
          <button 
            onClick={() => handleMenuClick(item.key)}
            className="menu-button"
          >
            {item.label}
            {/* Show arrow based on expanded state */}
            <span>{expandedMenuKey === item.key ? '▼' : '▶'}</span>
          </button>
          {/* Render submenu only if this menu is expanded */}
          {expandedMenuKey === item.key && item.children.length > 0 && (
            <div className="submenu">
              {item.children.map(subItem => (
                <div key={subItem} className="submenu-item">{subItem}</div>
              ))}
            </div>
          )}
        </div>
      ))}
    </div>
  );
};

export default Sidebar;

How This Fixes Both Issues #

1. Single-click toggle: When you click a menu, handleMenuClick checks if it's already the expanded one. If yes, it sets expandedMenuKey to null (closes the submenu). If not, it sets it to the clicked menu's key (opens the submenu). No more double-clicks needed!
2. Auto-close other submenus: Since we only track one expandedMenuKey, clicking any new menu will overwrite this value—automatically closing any previously open submenus, leaving only the current one expanded.

Vanilla JS Alternative #

If you're not using a framework, here's a simplified vanilla JS approach:

const sidebar = document.querySelector('.sidebar');
let expandedMenu = null;

sidebar.addEventListener('click', (e) => {
  const menuButton = e.target.closest('.menu-button');
  if (!menuButton) return;

  const menuKey = menuButton.dataset.menuKey;
  const submenu = menuButton.nextElementSibling;

  if (expandedMenu === menuKey) {
    // Close the current submenu
    submenu.style.display = 'none';
    expandedMenu = null;
  } else {
    // Close any open submenus first
    document.querySelectorAll('.submenu').forEach(sub => sub.style.display = 'none');
    // Open the clicked submenu
    submenu.style.display = 'block';
    expandedMenu = menuKey;
  }
});

Just make sure your HTML has data-menu-key attributes on each menu button, and the submenu is the next sibling element.

That should resolve both of your sidebar issues! Let me know if you need help adapting this to your specific code setup.

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