Ecco come farlo in 3 fasi:

FASE 1:

Creare un nuovo file menu.js e mettetelo nel vostro Tema figlio di Divi (nel mio caso il tema Child si chiama derma):

Inserite il seguente codice nel file menu.js:

jQuery(document).ready(function($){
    function ds_setup_collapsible_submenus() {
        var $menu = $('.et_mobile_menu'),
            top_level_link = '.et_mobile_menu .menu-item-has-children > a';
 
        $menu.find('a').each(function() {
            $(this).off('click');
            if ( $(this).is(top_level_link) ) {
                $(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');
                });
            }
        });
    }
    setTimeout(function() {
        ds_setup_collapsible_submenus();
    }, 700);
});

FASE 2:

Collegare il menu.js nella scheda Integrazione di Divi >> Opzioni del tema >> Integrazione >> Aggiungi il codice alla del tuo blog.

Nel mio caso il codice (il percorso completo del file menu.js) è:

<script type='text/javascript' src='https://derma-am.com/wp-content/themes/derma/menu.js'></script>

FASE 3:

Aggiungete il seguente codice nel vostro Divi's stile.css:

/* Closing sub menu - mobile version */
.et_pb_menu .et_mobile_menu .menu-item-has-children > a,
#main-header .et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    position: relative;
}
 
.et_pb_menu .et_mobile_menu .menu-item-has-children > a:after, #main-header .et_mobile_menu .menu-item-has-children > a:after {
    font-family: 'ETmodules', sans-serif;
    text-align: center;
    speak: none;
    font-weight: 500;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    font-size: 14px;
    font-style: italic;
    content: '\4c';
    top: 11px;
    right: 13px;
}
 
.et_pb_menu .et_mobile_menu .menu-item-has-children.visible > a:after,
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after {
    content: '\4d';
}
 
.et_pb_menu .et_mobile_menu ul.sub-menu,
#main-header .et_mobile_menu ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li ul.sub-menu {
    display: none !important;
    visibility: hidden !important;
    transition: all 1.5s ease-in-out;
}
 
.et_pb_menu .et_mobile_menu li.visible > ul.sub-menu,
#main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l #main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li.visible > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
}

È possibile aggiungere qualsiasi testo alla riga 19 (ad esempio): contenuto: 'open \4c'; e alla riga 26 (ad esempio): contenuto: 'chiudere \4d';

Voilà!

Buon divertimento 🙂

Salute