WordPress单页网站移动端点击锚点后菜单不关闭问题求助

Hey there! I totally get your frustration—mobile menus that stay open after clicking anchor links are such a nuisance. Let's tweak your navigation.js code to fix this issue.

The Problem #

Your current code only handles closing the menu when clicking the toggle button, but it doesn't listen for clicks on the anchor links inside the menu. That's why regular links close the menu (they reload the page) but anchor links don't—they just jump to the section without triggering a page refresh.

The Solution #

We'll add code to:

1. Grab all anchor links in the menu
2. Attach a click event to each one that closes the menu, just like clicking the toggle button does
3. Refactor the close logic into a reusable function to keep things clean

Here's the modified code with comments explaining the new parts:

/**
 * navigation.js
 *
 * Handles toggling the navigation menu for small screens.
 */
( function() {
	var container, button, menu, menuLinks;

	container = document.getElementById( 'site-navigation' );
	if ( ! container ) {
		return;
	}

	button = container.getElementsByTagName( 'button' )[0];
	if ( 'undefined' === typeof button ) {
		return;
	}

	menu = container.getElementsByTagName( 'ul' )[0];

	// Hide menu toggle button if menu is empty and return early.
	if ( 'undefined' === typeof menu ) {
		button.style.display = 'none';
		return;
	}

	menu.setAttribute( 'aria-expanded', 'false' );
	if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
		menu.className += ' nav-menu';
	}

	// --- New: Get all anchor links inside the menu ---
	menuLinks = menu.querySelectorAll( 'a[href^="#"]' );

	// --- New: Reusable function to close the menu ---
	function closeMenu() {
		if ( -1 !== container.className.indexOf( 'toggled' ) ) {
			container.className = container.className.replace( ' toggled', '' );
			button.setAttribute( 'aria-expanded', 'false' );
			menu.setAttribute( 'aria-expanded', 'false' );
		}
	}

	// Toggle menu when button is clicked
	button.onclick = function() {
		if ( -1 !== container.className.indexOf( 'toggled' ) ) {
			closeMenu();
		} else {
			container.className += ' toggled';
			button.setAttribute( 'aria-expanded', 'true' );
			menu.setAttribute( 'aria-expanded', 'true' );
		}
	};

	// --- New: Close menu when any anchor link is clicked ---
	menuLinks.forEach( function( link ) {
		link.addEventListener( 'click', closeMenu );
	} );

} )();

Key Notes: #

• Reusable closeMenu() Function: This avoids repeating code between the button click and link click handlers, making the code easier to maintain.
• querySelectorAll('a[href^="#"]'): This selects all links in the menu whose href starts with # (aka anchor links).
• aria-expanded: You were right! This attribute tells assistive technologies like screen readers whether the menu is expanded (true) or collapsed (false). We make sure to update it every time we change the menu state to keep accessibility intact.

Testing It Out #

After replacing your original code with this modified version, test on mobile:

1. Open the menu
2. Click any anchor link
3. The page should jump to the anchor section, and the menu should automatically close—just like it does with regular links!

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