WPML移动端下拉菜单跳转问题：如何修改其HTML结构？

方法1：通过后台菜单设置直接修改 #

• 进入WordPress后台「外观」→「菜单」，找到带下拉子菜单的父级菜单项
• 将它的URL字段改成#，保存菜单即可。如果是WPML同步的多语言菜单，记得在对应语言的菜单里做同样修改
• 注意：这种修改会让PC端的父菜单也跳转至#，如果只需要移动端生效，看下面的代码方法

方法2：用PHP过滤器仅修改移动端菜单链接 #

在子主题的functions.php中添加以下代码，只针对移动端的父级菜单项修改链接：

add_filter('nav_menu_link_attributes', 'modify_mobile_parent_menu_links', 10, 3);
function modify_mobile_parent_menu_links($atts, $item, $args) {
    // 替换成你的主题移动端菜单的注册位置，比如'mobile_nav'，可在主题functions.php的register_nav_menus中查看
    if ($args->theme_location == 'mobile_nav' && in_array('menu-item-has-children', $item->classes)) {
        $atts['href'] = '#';
        // 若要完全移除<a>标签，注释上面一行，启用下面的辅助函数
        // add_filter('walker_nav_menu_start_el', 'replace_parent_link_with_span', 10, 4);
    }
    return $atts;
}

// 移除<a>标签的辅助函数（按需启用）
function replace_parent_link_with_span($item_output, $item, $depth, $args) {
    if ($args->theme_location == 'mobile_nav' && in_array('menu-item-has-children', $item->classes)) {
        $item_output = str_replace('<a', '<span', $item_output);
        $item_output = str_replace('</a>', '</span>', $item_output);
    }
    return $item_output;
}

• 优先使用子主题或代码片段插件（如Code Snippets）添加代码，避免直接修改父主题文件导致更新丢失

方法3：用JS临时阻止跳转（无需修改PHP） #

如果不想碰后端代码，可在子主题footer.php末尾添加以下JS，阻止移动端父菜单的跳转行为：

<script>
document.addEventListener('DOMContentLoaded', () => {
    // 替换成你的移动端菜单父项选择器，比如'.mobile-menu .menu-item-has-children > a'
    const mobileParentLinks = document.querySelectorAll('.mobile-menu .menu-item-has-children > a');
    mobileParentLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            // 按主题移动端断点调整数值，这里以768px为例
            if (window.innerWidth < 768) {
                e.preventDefault();
                // 可添加菜单展开/收起逻辑，比如：
                // link.parentElement.classList.toggle('menu-expanded');
            }
        });
    });
});
</script>

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