我有一个可折叠菜单（移动的视图），它有一个可折叠的菜单项，当我点击它时，可折叠菜单关闭，我看不到可展开的菜单项。
我想在菜单中保持开放，当我点击可扩展的菜单项，请看看jQuery和CSS提供。
注意：这是Divi页面生成器的默认标题菜单，它在平板电脑/移动的视图上有问题。有很多类似的问题与这个问题有关，但我想分享我的代码，并希望看到出了什么问题。谢谢.
剧本：

(function($) { 
        function setup_collapsible_submenus() {
            // mobile menu
            $('.mobile_nav .menu-item-has-children > a').after('<span class="menu-closed"></span>');
            $('.mobile_nav .menu-item-has-children > a').each(function() {
                $(this).next().next('.sub-menu').toggleClass('hide',700);
            });
            $('.mobile_nav .menu-item-has-children > a + span').on('click', function(event) {
                event.preventDefault();
                
            $(this).toggleClass('menu-open');
                $(this).next('.sub-menu').toggleClass('hide',700);
                    
            });
        
        }
        $(window).load(function() {
            setTimeout(function() {
                setup_collapsible_submenus();
            }, 700);
        });
    })(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;
    }
    /*This styles the icon and moves it to the right*/
    #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: 50;
    }
    /*Here you can swap out the actual icons*/
    #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";
    }