Hier erfahren Sie in 3 Schritten, wie es geht:

SCHRITT 1:

Neue Datei erstellen menu.js und legen Sie es in Ihr Divi's Child Theme (in meinem Fall heißt mein Child-Theme "derma"):

Fügen Sie den folgenden Code in die 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);
});

SCHRITT 2:

Verbinden Sie die menu.js auf der Registerkarte Integration in Divi >> Themenoptionen >> Integration >> Code in den Ihres Blogs einfügen.

In meinem Fall ist der Code (der vollständige Pfad zum menu.js) ist:

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

SCHRITT 3:

Fügen Sie den folgenden Code in Ihre Divi's Stil.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;
}

Sie können einen beliebigen Text hinzufügen: Zeile 19 (zum Beispiel): Inhalt: 'open \4c'; und in Zeile 26 (zum Beispiel): Inhalt: 'close \4d';

Voilà!

Viel Spaß 🙂 .

Prost