Skip to main content
2 of 2
add code formatting
Antti Koskinen
  • 5.9k
  • 8
  • 15
  • 26

This will add new classes to your menus triggered by click event. tell the default that you wish to not hover to have css of li:hover {display:none;}

jQuery(document).ready(function($){
    $('.nav-menu .menu-item-has-children').on("click", function(e){
            e.stopPropagation();
            if($(this).is("li")){
                if($(this).hasClass('opened')){
                    $(this).addClass('closed');
                }else{$(this).removeClass('closed');}
                $(this).siblings().children('.sub-menu').removeClass('visible');
                $(this).siblings().removeClass('current-menu-parent opened');
                $(this).toggleClass('current-menu-parent opened');
                $(this).children('.sub-menu').toggleClass('visible');
            }
            else{
                if($(this).parent().hasClass('opened')){
                    $(this).parent().addClass('closed');
                }else{$(this).parent().removeClass('closed');}
                $(this).parent().siblings().children('.sub-menu').removeClass('visible');
                $(this).parent().siblings().removeClass('current-menu-parent');
                $(this).parent().children('.sub-menu').toggleClass('visible');
                $(this).parent().toggleClass('current-menu-parent opened');
            }
    });