WordPress移动端菜单内部链接点击后不关闭问题求助

Hey Andrew, 你的分析完全精准——外部链接触发页面重载，浏览器重新渲染后移动端菜单自然回到收起状态；而内部锚点只是让页面滚动到对应区块，全程没有页面刷新，所以菜单的展开状态会被保留下来。下面给你几个实用的解决方案：

方法1：监听锚点点击，手动触发菜单关闭 #

这是最直接的方案，我们用JavaScript监听移动端菜单里的内部锚点链接，点击时手动调用菜单的关闭逻辑。

首先，通过浏览器开发者工具找到你的移动端菜单相关类名（比如菜单容器的类、切换按钮的类），然后添加这段代码：

// 等待页面DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 选中菜单里所有指向内部锚点的链接（排除空的#链接）
    const internalAnchors = document.querySelectorAll('.mobile-menu a[href^="#"]:not([href="#"])');
    
    // 给每个锚点链接绑定点击事件
    internalAnchors.forEach(link => {
        link.addEventListener('click', () => {
            // 方案A：模拟点击菜单切换按钮来关闭菜单
            const menuToggleBtn = document.querySelector('.menu-toggle'); // 替换成你站点的切换按钮类名
            if (menuToggleBtn) menuToggleBtn.click();
            
            // 方案B：直接移除菜单的展开类（如果主题是用类控制显示的话）
            // const mobileMenu = document.querySelector('.mobile-menu-container'); // 替换成菜单容器类名
            // if (mobileMenu) mobileMenu.classList.remove('is-open'); // 替换成展开状态的类名
        });
    });
});

你可以把这段代码添加到主题的自定义JS区域，或者通过functions.php用wp_enqueue_script添加，也可以用Custom CSS & JS这类插件来快速插入。

方法2：给锚点链接添加自定义类，精准控制 #

如果你能修改菜单的输出逻辑，可以给所有内部锚点链接加一个专属类，让JS监听更精准。在主题的functions.php里添加这段PHP代码：

function add_internal_anchor_menu_class($atts, $item, $args) {
    // 只给移动端菜单的锚点链接加类（替换'mobile-menu'为你的移动端菜单位置标识）
    if ($args->theme_location === 'mobile-menu' && strpos($item->url, '#') !== false && $item->url !== '#') {
        $atts['class'] = isset($atts['class']) ? $atts['class'] . ' internal-anchor-link' : 'internal-anchor-link';
    }
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_internal_anchor_menu_class', 10, 3);

之后JS里就可以把选择器改成.internal-anchor-link，避免误触发其他链接。

方法3：调用主题内置的菜单控制逻辑 #

如果你用的是Elementor、Astra这类流行主题，它们通常有内置的菜单控制方法。比如Elementor的移动端菜单，可以直接调用它的关闭逻辑：

// 关闭Elementor移动端菜单
if (window.elementorFrontend) {
    const menuContainer = elementorFrontend.elements.$menuContainer;
    menuContainer.removeClass('elementor-menu-toggle__container--open');
}

具体可以查看主题的官方文档，或者通过开发者工具查看菜单的显示/隐藏逻辑，直接复用主题的代码。

测试小提示 #

• 记得把代码里的类名替换成你站点实际的类名（右键菜单元素→检查就能看到）
• 测试前清除浏览器缓存，避免旧代码干扰效果

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