Divi Wordpress 主题：父级最高级别不可点击且不链接到移动菜单上的页面并折叠嵌套项目

Question

Divi automatically presents mobile menu when the media screen width is less than 1025px. By default, all menu items, including sub-menu items, are displayed in full expanded view with all menu items on the list.

Problem is, the parent level menu item no longer linkable to its own web page. In other words, tapping on the parent menu item that has nested sub-menus only expand or collapse the sub-menus, even though the parent menu itself leads to a valid web page URL, essentially preventing visitors to access the web page.

I've already tried this fix I found online, but it doesn't work.

#main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '4c'; top: 13px; right: 10px; } #main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '4d'; } #main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;} #main-header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; } (function($) {

    function setup_collapsible_submenus() {
        var $menu = $('#mobile_menu'),
            top_level_link = '#mobile_menu .menu-item-has-children > a';

        $menu.find('a').each(function() {
            $(this).off('click');

            if ( $(this).is(top_level_link) ) {
                if ($(this).parent().hasClass('always-visitable')) {
                    $('<a class="hover-link"></div>')
                    .attr('href', $(this).attr('href'))
                    .on('click', function(e){ e.stopPropagation(); })
                    .appendTo($(this));
                }

                $(this).attr('href', '#');
            }

            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.mobile_nav').trigger('click');
                });
            } else {
                $(this).on('click', function(event) {
                    event.preventDefault();
                    $(this).parent().toggleClass('visible');
                });
            }
        });
    }

    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });

})(jQuery);
</script>

**Also the CSS:**

#main-header .et_mobile_menu .always-visitable {
    position: relative;
}
#main-header .et_mobile_menu .always-visitable .hover-link {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    right: 60px; /* right area continues to expand or collapse */

Answer 1

转到 Divi 主题选项 > 导航 > 常规设置 > 禁用顶层下拉菜单链接。