Navbar多子菜单单次仅展开一个功能实现技术咨询

Got it, let's tackle those two core submenu issues you're facing, building right on top of your existing code so you don't have to start from scratch.

1. Ensure Only One Submenu Is Open at a Time #

First, we need to add logic to close all other open submenus before toggling the current one. Here's how to update your JavaScript:

const dataToggle = document.querySelectorAll("[data-toggle]");

// Helper function to reset all submenus to closed state
function closeAllSubmenus() {
  dataToggle.forEach(button => {
    const dataTarget = button.getAttribute("data-target");
    const targetedItem = document.getElementById(dataTarget);
    const minusBtn = button.querySelector(".navbar__menu-minus-svg");
    const plusBtn = button.querySelector(".navbar__menu-plus-svg");
    
    if (targetedItem?.classList.contains("navbar__sub-menu-toggle-show")) {
      targetedItem.classList.remove("navbar__sub-menu-toggle-show");
      targetedItem.setAttribute("aria-expanded", "false");
      minusBtn.style.display = "none";
      plusBtn.style.display = "block";
    }
  });
}

for (let i = 0; i < dataToggle.length; i++) {
  const thisButton = dataToggle[i];
  const dataTarget = thisButton.getAttribute("data-target");
  const targetedItem = document.getElementById(dataTarget);
  const minusBtn = thisButton.querySelector(".navbar__menu-minus-svg");
  const plusBtn = thisButton.querySelector(".navbar__menu-plus-svg");
  
  thisButton.addEventListener("click", (e) => {
    e.stopPropagation(); // Stop click from bubbling up to document
    const isCurrentlyOpen = targetedItem.classList.contains("navbar__sub-menu-toggle-show");
    
    // Close all other submenus first
    closeAllSubmenus();
    
    // Toggle current submenu only if it was closed
    if (!isCurrentlyOpen) {
      targetedItem.classList.add("navbar__sub-menu-toggle-show");
      targetedItem.setAttribute("aria-expanded", "true");
      minusBtn.style.display = "block";
      plusBtn.style.display = "none";
    }
  });
}

Key Changes: #

• Added a reusable closeAllSubmenus() function to reset every submenu's state (closed, plus button visible, aria attribute updated).
• Call this helper before toggling the current submenu—guarantees only one stays open at a time.
• Swapped var for let in the loop (better scoping to avoid unexpected behavior).
• Added e.stopPropagation() to prevent the button click from triggering the document-level close logic we'll add next.

2. Close Submenus When Clicking Outside #

Next, add a click listener to the document that checks if the click happened outside any toggle button or open submenu. If so, shut all submenus:

// Close submenus when clicking outside toggle buttons or submenus
document.addEventListener("click", (e) => {
  const clickedInsideToggle = [...dataToggle].some(toggle => toggle.contains(e.target));
  const clickedInsideOpenSubmenu = document.querySelector(".navbar__sub-menu-toggle-show")?.contains(e.target);
  
  if (!clickedInsideToggle && !clickedInsideOpenSubmenu) {
    closeAllSubmenus();
  }
});

How This Works: #

• We check if the click target is inside any data-toggle button using contains().
• We also check if it's inside an actively open submenu.
• If neither is true, we trigger the closeAllSubmenus() helper to shut everything down.

Quick Cleanup Tips for Your Existing Code #

• Some links (like "Vendor Partners") have data-toggle but no plus/minus SVGs—adding those will keep your UI consistent across all toggleable menus.
• Your CSS has duplicate .navbar__sub-menu-toggle-show rules—you can merge those into a single rule to avoid confusion later.

That should cover both of your core requirements! Test it out, and let me know if you hit any edge cases that need tweaking.

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