单页网站中子菜单点击后父级菜单链接颜色同步修改及滚动恢复问题

Got it, let's fix this issue where your Services parent link doesn't stay active when clicking its submenu items, and ensure both the parent and child get the blue color when active, then revert to white when scrolling away.

The Problem with Your Current Code #

Your existing JS only targets the direct child links of .menu-item (the main menu links), so it doesn't handle clicks on submenu items or update the parent Services link's state. Also, the scroll logic doesn't account for submenu sections to keep the parent active.

Step-by-Step Fix #

First, let's update the CSS to make sure submenu links also show the active blue color when they have the activenavlink class:

/* Add this to your LINK STATES section */
.header .menu > .menu-item > .sub-menu > .menu-item > a.activenavlink {
  color: #006aff;
}

Now, replace your existing JavaScript with this updated version:

(() => {
  // Helper function to clear all active link states
  function removeAllActiveLinks() {
    $('.header .menu > .menu-item > a.activenavlink').removeClass('activenavlink');
    $('.header .menu > .menu-item > .sub-menu > .menu-item > a.activenavlink').removeClass('activenavlink');
  }

  // Handle clicks on main menu items
  $('.header .menu > .menu-item > a').click(function() {
    removeAllActiveLinks();
    $(this).addClass('activenavlink');
  });

  // Handle clicks on submenu items
  $('.header .menu > .menu-item > .sub-menu > .menu-item > a').click(function() {
    removeAllActiveLinks();
    // Activate the clicked submenu link
    $(this).addClass('activenavlink');
    // Activate its parent Services link
    $(this).closest('.menu-item-has-children').find('> a').addClass('activenavlink');
  });

  // Handle scroll events to update active links
  $(window).scroll(function() {
    const scrollPos = $(this).scrollTop();
    let activeSubSectionFound = false;

    // First check if we're scrolling over a submenu section
    $('.header .menu > .menu-item > .sub-menu > .menu-item > a').each(function() {
      const targetSection = $($(this).attr('href'));
      if (targetSection.length) {
        const sectionTop = targetSection.offset().top - 1;
        const sectionBottom = sectionTop + targetSection.outerHeight();
        
        if (scrollPos >= sectionTop && scrollPos < sectionBottom) {
          removeAllActiveLinks();
          $(this).addClass('activenavlink');
          $(this).closest('.menu-item-has-children').find('> a').addClass('activenavlink');
          activeSubSectionFound = true;
          return false; // Exit loop once we find the active section
        }
      }
    });

    // If no submenu section is active, check main menu sections
    if (!activeSubSectionFound) {
      $('.header .menu > .menu-item > a').each(function() {
        const targetSection = $($(this).attr('href'));
        if (targetSection.length) {
          const sectionTop = targetSection.offset().top - 1;
          const sectionBottom = sectionTop + targetSection.outerHeight();
          
          if (scrollPos >= sectionTop && scrollPos < sectionBottom) {
            removeAllActiveLinks();
            $(this).addClass('activenavlink');
            return false; // Exit loop once we find the active section
          }
        }
      });
    }
  });
})();

What This Does #

1. removeAllActiveLinks(): A reusable helper to clear active states from both main and submenu links, preventing duplicate active entries.
2. Submenu click handler: When you click a submenu item, it clears all active states, then adds activenavlink to both the clicked submenu link and its parent Services link.
3. Updated scroll logic:
   • First checks if we're in a submenu section (like #service1 or #service2). If yes, it activates both the submenu link and parent Services link.
   • If we scroll away from all Services-related sections, it switches to activating the corresponding main menu link and clears the Services active state.

Quick Checks #

• Ensure all section IDs (like #home, #service1) match the href values in your menu links exactly (they're case-sensitive!).
• The -1 offset in the scroll check is for small scroll adjustments—tweak this number if you want the active state to trigger earlier or later.

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