导航菜单悬停显示下拉功能失效，请求技术协助

Hey there! Let's work through your navigation hover problem together—you're right that both selector targeting and toggle logic are contributing to the issue. Let's break it down and fix it step by step.

Key Issues Identified #

1. Overly Redundant Selectors in Hover Logic
   Your hover event uses $(this).parent().find(".menu-test-container ul li .sub-menu:first")—this path is way too specific and will miss the direct sub-menu tied to the hovered item. The dropdown toggle button is inside a menu-item-has-children list item, so we only need to target the sub-menu directly under that parent li.

2. Duplicate Click Event Bindings
   You have two separate $(".dropdown-toggle").click() handlers, which can cause unexpected behavior when clicking (like toggling classes twice). We should split these into targeted handlers for the main menu toggle and sub-menu toggles to avoid conflicts.

3. Hover Toggle Logic Limitations
   Using toggleClass directly in a hover event can be unpredictable if the user moves the mouse quickly. It's better to explicitly handle mouseenter and mouseleave states, and also make sure hover doesn't interfere with click-activated sub-menus.

Corrected Code #

JavaScript

/* NAVIGATION ON CLICK */
// Primary menu drop down (mobile) - target only the top-level toggle
$(".main-navigation > .dropdown-toggle").click(function() {
  $(this).next(".menu-test-container #primary-menu").toggleClass("toggle-on");
});

// Sub menu drop down - target only toggles inside menu items with children
$(".menu-item-has-children .dropdown-toggle").click(function() {
  const $subMenu = $(this).parent().find(".sub-menu:first");
  $subMenu.toggleClass("toggle-on");
  
  // Optional: Toggle +/- symbol for better UX
  $(this).find(".dropdown-symbol").text(function(i, currentText) {
    return currentText === "+" ? "-" : "+";
  });
  $(this).toggleClass("toggled-on");
});

/* NAVIGATION ON HOVER */
// Bind hover to the parent menu item (better UX than just hovering the button)
$(".menu-item-has-children").hover(
  function() {
    // Show sub-menu on mouse enter
    $(this).find(".sub-menu:first").addClass("toggle-on");
  },
  function() {
    // Hide sub-menu on mouse leave ONLY if it wasn't activated by click
    const $toggleBtn = $(this).find(".dropdown-toggle");
    if (!$toggleBtn.hasClass("toggled-on")) {
      $(this).find(".sub-menu:first").removeClass("toggle-on");
    }
  }
);

CSS (Minor Adjustments)

Your existing CSS is mostly fine, but we can add a small improvement for hover feedback:

/* Optional: Highlight parent menu item on hover */
.main-navigation ul li.menu-item-has-children:hover > a {
  color: #e0e0e0; /* Lighten link color on hover */
}

/* Keep your existing styles */
*, html {
  margin: 0;
  font-size: 16px;
}
.site-header {
  background-color: black;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main-navigation {
  padding: 2rem;
  background-color: red;
}
.main-navigation .sub-menu {
  display: none;
}
.sub-menu.toggle-on {
  display: block;
}
.main-navigation ul, .main-navigation ul ul, .main-navigation ul ul ul {
  list-style: none;
}
.main-navigation ul li a {
  color: #fff;
  text-decoration: none;
}
.main-navigation ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.main-navigation ul li {
  margin-right: 2rem;
}

HTML (No Changes Needed)

Your existing HTML structure is correct—we don't need to modify anything here.

What We Changed #

• Targeted Selectors: We split click handlers to target only the top-level main menu toggle and sub-menu toggles separately, avoiding cross-triggering.
• Explicit Hover States: Instead of toggleClass, we use addClass on mouseenter and removeClass on mouseleave, with a check to preserve click-activated sub-menus.
• UX Improvements: Added +/- symbol toggling and hover feedback for parent menu items to make the navigation more intuitive.

This should fix your hover dropdown issue while keeping the click functionality intact!

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