WordPress站点移动端汉堡菜单点击无响应JS问题排查求助

核心问题点排查 #

你遇到的无响应且无报错的情况，基本是以下几类原因导致：

1. DOM元素不匹配：你的JS逻辑绑定的是.burger类的按钮，但是你提供的HTML代码里没有任何class为burger的元素，你注释掉的按钮类是.menu-toggle，document.querySelector('.burger')获取结果为null，点击事件绑定无效，且无报错。
2. 类未实例化：你仅定义了Header类并导出，没有执行实例化操作new Header()，构造函数内的逻辑完全不会执行。
3. 重复ID冲突：两处wp_nav_menu调用都使用了topics-menu作为menu_id，同一页面出现两个相同ID的元素，属于无效HTML结构，可能干扰后续DOM操作。
4. jQuery加载顺序错误：代码混用原生DOM选择和jQuery方法，若jQuery在你的自定义JS之后加载，方法调用会静默失败。
5. 初始状态异常：未检查#mobile-navigation元素移动端视口下的初始CSS状态，若默认未设置display: none，第一次点击slideToggle会执行收起逻辑，视觉上看起来无响应。

修复步骤 #

• 在HTML对应位置添加汉堡按钮元素：

<button class="burger" aria-expanded="false" aria-label="菜单切换">☰</button>

• 修改移动端菜单的ID，避免重复冲突：

wp_nav_menu(
    array(
        'theme_location' => 'menu-2',
        'menu_id'        => 'topics-menu-mobile',
    )
);

• 给JS逻辑增加非空校验，方便排查问题：

class Header {
    constructor(){
        this.burger = document.querySelector('.burger')
        this.nav = document.querySelector('#mobile-navigation')
        // 元素未找到时抛出提示，避免静默失败
        if(!this.burger || !this.nav) {
            console.warn('菜单元素未找到', {burger: this.burger, nav: this.nav})
            return
        }
        this.events()
    }
    // 其余逻辑保持不变
}

• 确保类被正确实例化，在入口JS中添加如下代码：

import Header from './你的Header文件路径.js'
// 等待DOM加载完成后再实例化
document.addEventListener('DOMContentLoaded', () => {
    new Header()
})

• 调整WordPress脚本入队逻辑，声明jQuery依赖，保证加载顺序正确：

function enqueue_custom_menu_script() {
    wp_enqueue_script( 'custom-header', get_template_directory_uri() . '/js/header.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_menu_script' );

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