求助：WordPress侧边菜单打开时默认展开子项的jQuery实现

Hey there! Let's work through getting that submenu to auto-expand when your sidebar mega menu opens. Since you're using a plugin instead of building from scratch, we just need to work with the existing CSS classes the plugin generates—no ID required. Here's how to tackle it:

Step 1: Identify Key Elements with Browser Dev Tools #

First, open your site, right-click the sidebar menu area, and hit "Inspect" (Chrome/Firefox) to pull up dev tools. You need to find three critical things:

• The sidebar menu container: Look for the element that gets a new class when the menu opens (common examples: is-open, active, menu-expanded).
• The target parent menu item: The top-level item holding the submenu you want to expand—WordPress almost always adds a unique class like menu-item-XXX (where XXX is the menu item's internal ID) to these.
• The expanded state classes: Check what class the plugin adds to the parent item or submenu when you manually expand it (e.g., menu-item-open, submenu-visible, mega-submenu-expanded).

Step 2: Use jQuery (or Vanilla JS) to Trigger the Expansion #

Instead of just triggering a click (which can sometimes conflict with plugin logic), directly adding the plugin's "expanded" class is more reliable. Here are two solid approaches:

Option 1: Listen for the Menu Toggle Click #

If your sidebar opens when clicking a button with a class like .sidebar-toggle, use this code:

$(function() {
  // Listen for the menu toggle button click
  $('.sidebar-toggle').on('click', function() {
    // Add a small delay to make sure the menu has time to render open
    setTimeout(function() {
      // Verify the sidebar is actually open before proceeding
      if ($('.sidebar-menu-container').hasClass('is-open')) {
        // Add the plugin's expanded class to your target menu item
        $('.menu-item-123').addClass('menu-item-open');
        // Also force the submenu to show (adjust class to match your plugin)
        $('.menu-item-123 .mega-submenu').addClass('submenu-visible');
      }
    }, 100);
  });
});

Option 2: Watch for Menu State Changes (More Reliable) #

Some plugins use JavaScript to toggle classes instead of relying solely on click events. A MutationObserver will detect when the menu's "open" class is added automatically:

$(function() {
  const sidebarMenu = document.querySelector('.sidebar-menu-container');
  
  if (sidebarMenu) {
    // Create an observer to monitor class changes on the menu container
    const observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        // Check if the class attribute was modified
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
          // If the menu is now open, expand the target submenu
          if (sidebarMenu.classList.contains('is-open')) {
            $('.menu-item-123').addClass('menu-item-open');
            $('.menu-item-123 .mega-submenu').addClass('submenu-visible');
          }
        }
      });
    });
    
    // Start observing the menu container for class updates
    observer.observe(sidebarMenu, { attributes: true });
  }
});

Step 3: Customize the Code for Your Site #

Make sure to replace these placeholders with your site's actual classes/selectors:

• .sidebar-toggle: The class of your sidebar menu open button
• .sidebar-menu-container: The class of your sidebar's main container
• is-open: The class added when the sidebar is open
• .menu-item-123: The unique class of your target parent menu item
• menu-item-open / submenu-visible: The classes your plugin uses to mark expanded items/submenus

Step 4: Add the Code to WordPress #

You can add this code in a few simple ways:

• Go to Appearance > Customize > Additional CSS/JS (many themes include a custom JS section here)
• Use a plugin like Code Snippets to create a new JavaScript snippet
• Add it to your theme's functions.php file using wp_enqueue_script (if you're comfortable editing theme files)

If you still want to try triggering a click instead, replace the addClass lines with:

$('.menu-item-123 > a').trigger('click');

Just note that some plugins have anti-duplicate-click logic, so this might not work as reliably as adding the class directly.

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