Trying to make theme dropdown menu OnClick instead of hover

Question

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

I'm using the DIVI theme and making some relatively simple modifications to it to better suit my needs. One thing I'm having some difficulty with though surprisingly is swapping out its vertical menu's hover state drop downs to onclick functionality.

I've put together an example of the code below here: JSFIDDLE

$('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;
});

Oddly, though I can't seem to remove the hover state functionality from the menu. An example of DIVI can be found here: DIVI

Note: You'll need to go to headers in the navigation and choose the dark vertical navigation to replicate my layout.

Thanks in advance for your thoughts!

Answer 1

Generally you should use classes that theme uses to manage showing and hiding menu in order to keep it compatible.

CODE RESPOSIBLE FOR HOVER MENU (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 );
} );

HOW TO UNBIND TRIGGERING HOVER EVENT #1 (if you want to do this somewhere else after it is initialized in custom.js):

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

HOW TO UNBIND TRIGGERING HOVER EVENT #2 (if you want to modify custom.js right after the code):

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

HOW TO UNBIND TRIGGERING HOVER EVENT #3 (if you want to modify custom.js :

Just remove the code and replace it with your on click event code

HOW TO MAKE ON CLICK EVENT - if you want to leave previous hover code - past below the hover code or use it in your place - note it must be used after custom.js or inside after hover code:

$( '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' );
    }
});

The code i gave you has no anitmation so do it on your own. Simplest way is to use CSS for example:

<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;
}

FIDDLE EXAMPLE - it turns off HOVER event and set up ON CLICK event.

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

I added some CSS classes in order to keep it compatible with your theme css classes. I added "nav" classs to parent UL just like it in your theme and i added "mega-menu" class to li parent of ul.sub-menu just like in your theme.