DropDown menu closes when click expandeable sub menu item

Question

I have a dropdown menu (mobile view), it has a collapsible menu item, when I click on it, the dropdown menu closes and I cannot see the expandable menu items.

I want the dropdown menu to stay open when I click on the expandable submenu item, kindly look into the jQuery and CSS provided.

Note: It is a Divi page builder default header menu and it's making issue on Tablet/mobile view. there are a lot of similar questions related to this issue, but I wanted to share my code and wanted to see what is going wrong. Thanks.

The Script:

    
    (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);
    

Here is 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";
    }

Answer 1

I have added event.stopPropagation(); and it seems to be working