jQuery点击主菜单异常：WordPress自定义移动端子菜单无法重新展开

Hey there! Let’s figure out why your mobile submenu only closes but won’t re-open—super common snag with custom WP menus, so let’s break it down step by step.

Most Likely Culprits & Fixes #

1. Your Toggle Logic Isn’t Accounting for Initial Hidden State #

A lot of times, this happens because your JavaScript isn’t properly detecting whether the submenu is already hidden. For example:

• If you’re using .hide() or .show() instead of a toggle method, you’ll only get one-way behavior.
• If your CSS sets the submenu to display: none by default, but your JS doesn’t check that state before toggling, it might skip the "show" step.

Fix with Toggle Classes (Most Reliable):
First, set up your mobile CSS to hide the submenu by default, and add a class to show it:

@media (max-width: 1199px) {
  /* Hide submenus by default on mobile */
  .menu-item-has-children .sub-menu {
    display: none;
    /* Add any other styling (padding, transition) here */
  }
  /* Show submenu when parent has the "open" class */
  .menu-item-has-children.open .sub-menu {
    display: block;
  }
}

Then update your JavaScript to toggle the open class on the parent menu item—this avoids relying on JS to directly manipulate styles, which can clash with CSS:

// Use event delegation to handle dynamic menus (critical for WP!)
$(document).on('click', '.menu-item-has-children', function(e) {
  // Stop default link behavior if your parent menu item is an <a> tag
  // (Otherwise clicking will refresh the page and reset the menu)
  e.preventDefault();
  // Toggle the "open" class on the parent
  $(this).toggleClass('open');
});

2. You’re Blocking Event Bubbling (or Missing Event Delegation) #

If your menu items are loaded dynamically (common in WP themes/plugins), binding events directly to .menu-item-has-children won’t work for items added after page load. Also, if you’re using e.stopPropagation() somewhere in your code, it might prevent the toggle event from firing correctly.

Quick Check:

• Open your browser dev tools > Console, and run $('.menu-item-has-children').length—if it returns 0 or less than your actual parent menu items, you need event delegation (like the code above using $(document).on()).

3. CSS !important Is Overriding Your Toggle #

If you have something like display: none !important on your .sub-menu, JS or class-based toggles won’t be able to override it. Always avoid !important unless absolutely necessary—use more specific selectors instead (like .main-navigation .menu-item-has-children .sub-menu).

Quick Debugging Steps #

1. Inspect the Submenu: Right-click the parent menu item, go to Elements tab, and check if the .sub-menu has the display: none style applied when closed.
2. Test the JS Toggle: In the Console, run $('.menu-item-has-children').first().toggleClass('open')—if the submenu shows up, your event binding is the issue.
3. Check for Conflicts: Temporarily disable other plugins or switch to a default WP theme to see if the submenu starts working—this will rule out JS/CSS conflicts.

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