WordPress主题移动端菜单窗口缩放失效，刷新后恢复问题求助

我明白你遇到的困扰了——调整浏览器窗口大小时，移动端菜单直接罢工，刷新页面后又能正常用；但用了那段resize监听代码后，菜单倒是能打开了，可关闭按钮和搜索表单容器又不见了。咱们来拆解问题，一步步修复：

先说说原代码的问题 #

那段代码的核心问题是重复绑定事件+没同步尺寸变化后的UI状态：

• 每次窗口resize都会重新执行jQuery(document).ready里的代码，导致#toggle-button和.btn-close-menu的点击事件被反复绑定，很容易引发冲突
• 只处理了点击逻辑，完全没考虑窗口尺寸变化时，菜单、关闭按钮、搜索容器的显示状态需要同步更新

修复后的代码方案 #

试试这段代码，我做了针对性的优化：

// 封装菜单控制逻辑，避免重复绑定事件
function initMobileMenu() {
    const $toggleBtn = jQuery("#toggle-button");
    const $closeBtn = jQuery(".btn-close-menu");
    const $menuRight = jQuery(".site-header .right");
    const $searchContainer = jQuery(".search-form-container"); // 请根据主题实际类名调整

    // 先解绑旧事件，防止重复绑定导致异常
    $toggleBtn.off('click');
    $closeBtn.off('click');

    // 绑定菜单打开事件
    $toggleBtn.on('click', function() {
        $menuRight.css("right", "0");
        // 强制显示关闭按钮和搜索容器
        $closeBtn.show();
        $searchContainer.show();
    });

    // 绑定菜单关闭事件
    $closeBtn.on('click', function() {
        $menuRight.css("right", "-540px");
    });

    // 根据当前窗口尺寸重置菜单状态
    const windowWidth = jQuery(window).width();
    // 这里的768px是常见移动端断点，根据主题实际断点修改
    if (windowWidth < 768) {
        $menuRight.css("right", "-540px"); // 默认隐藏移动端菜单
        $closeBtn.show(); // 确保关闭按钮在移动端可见
        $searchContainer.show(); // 确保搜索容器在移动端可见
    } else {
        $menuRight.css("right", "0"); // 桌面端正常显示菜单
        $closeBtn.hide(); // 桌面端隐藏关闭按钮
        $searchContainer.hide(); // 桌面端按需隐藏搜索容器
    }
}

// 页面加载完成后初始化菜单
jQuery(document).ready(function($) {
    initMobileMenu();
});

// 窗口resize时重新初始化菜单，加入防抖避免频繁触发
window.addEventListener('resize', function() {
    clearTimeout(window.menuResizeTimeout);
    window.menuResizeTimeout = setTimeout(initMobileMenu, 200);
});

关键修复点说明 #

• 事件解绑+封装函数：把菜单逻辑放进initMobileMenu，每次执行前解绑旧事件，彻底避免重复绑定的冲突
• 显式控制元素可见性：打开菜单时强制调用.show()，确保关闭按钮和搜索容器不会被隐藏
• 尺寸同步逻辑：根据当前窗口宽度自动切换菜单和相关元素的显示状态，适配移动端/桌面端
• 防抖处理：用setTimeout延迟执行初始化逻辑，避免窗口拖动时频繁触发，提升页面性能

小提示 #

如果你的主题里搜索容器的类名不是.search-form-container，或者移动端断点不是768px，记得根据主题的实际HTML结构和样式调整对应的选择器和数值哦。

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