移动端Divi下拉菜单点击可展开子项时自动关闭问题排查

在平板/手机视图下使用Divi页面构建器默认头部下拉菜单时，点击带有可折叠子菜单的菜单项后，整个下拉菜单会关闭，无法查看展开的子菜单。目标是点击可展开子菜单项时，下拉菜单保持展开状态，以下是对提供的jQuery及CSS代码的问题排查和修复方案：

一、jQuery代码问题分析 #

1. a标签默认事件未拦截：点击带子菜单的菜单项（a标签）时，Divi内置的菜单逻辑会触发下拉关闭，当前代码仅阻止了切换按钮（span）的默认行为，未处理a标签的点击事件。
2. 子菜单选择器依赖DOM结构：$(this).next().next('.sub-menu')完全依赖DOM节点的顺序，一旦菜单结构变动就会失效，改用siblings('.sub-menu')更稳定。
3. toggleClass不支持动画时长：原生jQuery的toggleClass()不接受第二个参数作为动画时长，当前代码中的700无实际效果，若需动画应使用slideToggle()或引入jQuery UI。
4. 事件冒泡未阻止：点击切换按钮时，事件会向上冒泡到父元素，可能触发Divi的默认关闭逻辑，需添加event.stopPropagation()。
5. 初始化时机不稳定：固定700ms的延迟不可靠，应监听文档就绪事件，或匹配Divi菜单的动态加载时机。

二、CSS代码问题分析 #

1. hide类未定义显示规则：当前CSS未给.hide类设置display: none，导致子菜单初始隐藏和切换逻辑失效。
2. 点击区域存在遮挡风险：虽然给切换按钮设置了z-index，但未给a标签预留右侧空间，可能导致文字与按钮重叠，影响点击体验。

三、修复后的代码 #

修复后的jQuery代码 #

(function($) { 
    function setup_collapsible_submenus() {
        // 为带子菜单的项添加切换按钮
        $('.mobile_nav .menu-item-has-children > a').after('<span class="menu-closed"></span>');
        
        // 初始隐藏所有子菜单
        $('.mobile_nav .menu-item-has-children .sub-menu').hide();
        
        // 绑定切换按钮点击事件
        $('.mobile_nav .menu-item-has-children > a + span').on('click', function(event) {
            event.preventDefault();
            event.stopPropagation(); // 阻止事件冒泡到父元素
            
            $(this).toggleClass('menu-open');
            $(this).siblings('.sub-menu').slideToggle(300); // 用slideToggle实现平滑动画
        });
        
        // 阻止点击a标签时触发下拉关闭逻辑
        $('.mobile_nav .menu-item-has-children > a').on('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    }
    
    // 文档就绪后初始化，替代固定延迟
    $(document).ready(function() {
        setup_collapsible_submenus();
        // 适配Divi窗口 resize 时的菜单状态切换
        $(window).on('resize', function() {
            if ($(window).width() < 981) { // Divi默认移动端断点
                setup_collapsible_submenus();
            }
        });
    });
})(jQuery);

修复后的CSS代码 #

#page-container .mobile_nav .menu-item-has-children {
    position: relative;
}

#page-container .mobile_nav .menu-item-has-children > a {
    background: transparent;
    font-weight: 600;
    padding-right: 50px; /* 为右侧切换按钮预留空间 */
}

/* 样式化切换图标并定位到右侧 */
#page-container .mobile_nav .menu-item-has-children > a + span {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    z-index: 100; /* 提高层级确保点击优先级 */
}

/* 切换图标内容 */
#page-container span.menu-closed:before {
    content: "\43";
    display: block;
    color: #000;
    font-size: 18px;
    font-family: ETmodules;
    visibility: visible;
}

#page-container span.menu-closed.menu-open:before {
    content: "\42";
}

/* 定义隐藏类的显示规则 */
#page-container .mobile_nav .sub-menu.hide {
    display: none;
}

关键修复点说明 #

• 拦截了a标签的默认行为和事件冒泡，彻底避免触发Divi的下拉关闭逻辑。
• 使用siblings('.sub-menu')替代依赖DOM顺序的选择器，提升代码兼容性。
• 用slideToggle()实现子菜单的平滑动画，替代无效的toggleClass动画参数。
• 为a标签添加右侧内边距，避免文字与切换图标重叠，优化点击体验。
• 补充.hide类的显示规则，确保子菜单切换逻辑生效。

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