Intentando hacer que el menú desplegable del tema haga clic en lugar de pasar el mouse

[Sorry if this is a dup to anyone, I was asked by the admins to move it to overflow]

Estoy usando el tema DIVI y le estoy haciendo algunas modificaciones relativamente simples para que se adapte mejor a mis necesidades. Una cosa con la que estoy teniendo algunas dificultades, aunque sorprendentemente, es cambiar los menús desplegables de estado de desplazamiento del menú vertical a la funcionalidad onclick.

He reunido un ejemplo del siguiente código aquí: JSFDDLE

$('ul.top-menu').children('.menu-item-has-children').click(function(){
    $(this).children('.sub-menu').slideToggle('slow');
}).children('ul').find('.menu-item').click(function (event) { //select all the `.child` elements and stop the propagation of click events on the elements
    event.stopPropagation();
    return false;
});

Curiosamente, aunque parece que no puedo eliminar la funcionalidad de estado de desplazamiento del menú. Un ejemplo de DIVI se puede encontrar aquí: divi

Nota: deberá ir a los encabezados en la navegación y elegir la navegación vertical oscura para replicar mi diseño.

¡Gracias de antemano por sus pensamientos!

En general, debe usar las clases que usa el tema para administrar mostrar y ocultar el menú para mantenerlo compatible.

CÓDIGO RESPONSABLE DEL MENÚ HOVER (custom.js):

var $et_top_menu = $( 'ul.nav' );

$et_top_menu.find( 'li' ).hover( function() {
    if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
        $(this).addClass( 'et-show-dropdown' );
        $(this).removeClass( 'et-hover' ).addClass( 'et-hover' );
    }
}, function() {
    var $this_el = $(this);

    $this_el.removeClass( 'et-show-dropdown' );

    setTimeout( function() {
        if ( ! $this_el.hasClass( 'et-show-dropdown' ) ) {
            $this_el.removeClass( 'et-hover' );
        }
    }, 200 );
} );

CÓMO DESVINCULAR EL EVENTO DE ACTIVACIÓN DEL HOVER #1 (si desea hacer esto en otro lugar después de inicializarlo en custom.js):

 $( 'ul.nav li' ).off("hover");

CÓMO DESVINCULAR EL EVENTO DE ACTIVACIÓN DEL HOVER #2 (si desea modificar custom.js justo después del código):

$et_top_menu.find( 'li' ).off("hover");

CÓMO DESVINCULAR EL EVENTO DE ACTIVACIÓN DEL HOVER #3 (si desea modificar custom.js :

Simplemente elimine el código y reemplácelo con su código de evento al hacer clic

CÓMO HACER UN EVENTO DE CLIC: si desea dejar el código de desplazamiento anterior, pase debajo del código de desplazamiento o utilícelo en su lugar; tenga en cuenta que debe usarse después de custom.js o dentro después del código de desplazamiento:

$( 'ul.nav li' ).off("hover");

$et_top_menu.find( 'li' ).click( function() {
    if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
        $(this).toggleClass( 'et-show-dropdown' );
        $(this).toggleClass( 'et-hover' );
    }
});

El código que te di no tiene animación, así que hazlo por tu cuenta. La forma más sencilla es usar CSS, por ejemplo:

<YOUR SELECTOR> {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

EJEMPLO DE VIOLÍN: apaga el evento HOVER y configura el evento ON CLICK.

http://jsfiddle.net/gwn9aqxs/2/

Agregué algunas clases de CSS para mantenerlo compatible con las clases de CSS de su tema. Agregué clases de “navegación” a UL principal como en su tema y agregué la clase “mega-menú” a li padre de ul.sub-menu como en su tema.

El desarrollador del tema produjo un resultado que produjo el resultado requerido. La alteración para intercambiar la funcionalidad de la página de navegación de DIVI se realiza en un archivo titulado frontend-builder-scripts.js que se encuentra en el directorio de la carpeta DIVI /includes/builder/scripts/frontend-builder-scripts.js

Para modificar el desplazamiento para hacer clic, cambie el siguiente código que se encuentra en la línea 1074 (línea superior a continuación) de .hover a .click.

$et_top_menu.find( 'li' ).hover( function() {
     if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
     $(this).addClass( 'et-show-dropdown' );
     $(this).removeClass( 'et-hover' ).addClass( 'et-hover' );
            et_menu_hover_triggered = true;
}

a

$et_top_menu.find( 'li' ).click( function() {
     if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
     $(this).addClass( 'et-show-dropdown' );
     $(this).removeClass( 'et-hover' ).addClass( 'et-hover' );
            et_menu_hover_triggered = true;
}