Skip to main content
WordPress Development

Return to Answer

add code formatting
Source Link
Antti Koskinen
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;}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'); } });

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

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

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');
            }
    });
Source Link
pedrox
pedrox
  • 1

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