Divi WordPress主题移动端菜单父级无法点击跳转问题求助

我完全懂你这个困扰——Divi默认的移动端菜单里，带嵌套子菜单的父项点了只会展开/折叠子菜单，哪怕它本身挂着有效URL也没法跳转，之前你试的方案没起作用，那咱们换个更靠谱的思路：把父项的点击区域拆分，让链接本身能正常跳转，用单独的按钮来控制子菜单的展开/折叠。

以下是经过验证的有效解决方案：

第一步：添加自定义CSS #

这段CSS会给带子菜单的父项右侧加个专门的展开按钮，同时调整样式避免冲突：

/* 给移动端带子菜单的父项预留按钮空间 */
.et_mobile_menu .menu-item-has-children > a {
    position: relative;
    padding-right: 60px !important; /* 和按钮宽度对应 */
}

/* 添加展开/折叠箭头按钮 */
.et_mobile_menu .menu-item-has-children > a::after {
    content: "\4D"; /* Divi自带的向下箭头图标 */
    font-family: 'ETmodules';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    cursor: pointer;
    pointer-events: auto !important; /* 确保按钮能触发点击 */
}

/* 展开后切换箭头方向 */
.et_mobile_menu .menu-item-has-children.visible > a::after {
    content: "\4C"; /* 向上箭头 */
}

/* 控制子菜单的显示/隐藏过渡 */
.et_mobile_menu .menu-item-has-children ul.sub-menu {
    display: none;
    visibility: hidden;
    transition: all 0.3s ease;
}

.et_mobile_menu .menu-item-has-children.visible ul.sub-menu {
    display: block;
    visibility: visible;
}

第二步：添加自定义JavaScript #

这段JS会重新绑定点击逻辑：父项的链接正常跳转，只有点击右侧箭头才切换子菜单状态：

(function($) {
    $(document).ready(function() {
        // 适配Divi菜单的动态加载，延迟执行
        setTimeout(function() {
            var $mobileMenu = $('#mobile_menu');
            
            // 先移除Divi默认绑定的父项点击事件
            $mobileMenu.find('.menu-item-has-children > a').off('click');
            
            // 绑定新的点击事件
            $mobileMenu.on('click', '.menu-item-has-children > a', function(e) {
                var $parentItem = $(this).parent('.menu-item-has-children');
                // 判断点击位置是否在箭头区域内
                var clickX = e.pageX - $(this).offset().left;
                var linkWidth = $(this).outerWidth();
                var arrowAreaWidth = 60; // 和CSS里的padding-right一致
                
                if (clickX > linkWidth - arrowAreaWidth) {
                    // 点击箭头区域，阻止跳转，切换子菜单状态
                    e.preventDefault();
                    $parentItem.toggleClass('visible');
                }
                // 点击链接其他区域，正常跳转，不做拦截
            });
            
            // 初始化：默认隐藏所有子菜单
            $mobileMenu.find('.menu-item-has-children').removeClass('visible');
            $mobileMenu.find('.menu-item-has-children ul.sub-menu').hide();
        }, 500);
    });
})(jQuery);

代码使用步骤 #

1. 登录WordPress后台，进入Divi > 主题选项 > 自定义代码
2. 在「自定义CSS」框粘贴上面的CSS代码
3. 在「自定义JavaScript」框粘贴上面的JS代码
4. 保存设置后，用手机或浏览器移动端调试模式测试菜单

注意事项 #

• 如果网站用了缓存插件，记得清空缓存再测试
• 确保你的Divi主题是最新版本，避免版本兼容问题
• 这段代码不会影响桌面端菜单的正常功能

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