jquerygoogle-chromedrop-down-menujquery-events

Jquery click event is not working in the mobile browsers and Google Chrome


I have some jQuery code to handle dropdown menu for mobile. It work fine on the Firefox but not in Chrome and mobile.

My website is https://excelwebdesign.ie, the code is already listened but it do not work, there is no any bugging. I don't know why. See my screenshot.

enter image description here

Here is my code:

jQuery(document).ready(function(){
        jQuery(".menu-toggle").click(function(){
            if(jQuery(this).hasClass("open")){
                jQuery(this).removeClass("open");
                jQuery("body").removeClass("navigation-open");
                
                jQuery("#menu-main-menu-mobile").children("li").hide();
            }else{
                jQuery(this).addClass("open");
                jQuery("body").addClass("navigation-open");
                
                jQuery("#menu-main-menu-mobile").children("li").each(function(i) {
                    jQuery(this).delay(100 * i).fadeIn(500);
                });
            }
        });
        
        jQuery("#menu-main-menu-mobile").children("li.menu-item-has-children").each(function(){
            var thismn = jQuery(this);
            
            thismn.children("a").on("click", function(e){
                e.preventDefault();

                jQuery("#navigation").find(".sub-menu.open").removeClass("open");
                thismn.children(".sub-menu").addClass("open");
                jQuery(".scwmobilemenu_head").html('<i class="fa fa-chevron-left"></i> Back');
                
                thismn.parent("ul").addClass("opensubmenu opensubmenu_level1");
                
                jQuery("#menu-main-menu-mobile").children("li").each(function(i) {
                    jQuery(this).children("a").delay(100 * i).animate({
                        left: -50,
                        opacity: 0
                    }, 500);
                });
                thismn.children(".sub-menu").children("li:not(.menu-item-object-ubermenu-custom)").each(function(i) {
                    jQuery(this).delay(200 * i).fadeIn(1000);
                });
            });
            
            thismn.find("li.menu-item-has-children").each(function(){
                var thismnlv2 = jQuery(this);
                
                thismnlv2.children("a").click(function(e){
                    e.preventDefault();
                    
                    thismnlv2.children(".sub-menu").addClass("open");
                    thismnlv2.parent("ul").addClass("opensubmenu opensubmenu_level2");
                    
                    jQuery(".opensubmenu_level2").children("li").each(function(i) {
                        jQuery(this).children("a").delay(100 * i).animate({
                            left: -50,
                            opacity: 0
                        }, 500);
                    });
                    thismnlv2.children(".sub-menu").children("li:not(.menu-item-object-ubermenu-custom)").each(function(i) {
                        jQuery(this).delay(200 * i).fadeIn(1000);
                    });
                });
            });
        });
        
        jQuery(".scwmobilemenu_head").click(function(){
            if(jQuery(".opensubmenu").length > 1){
                jQuery(".opensubmenu_level2").find(".sub-menu.open").children("li").fadeOut();
                jQuery(".opensubmenu_level2").children("li").each(function(i) {
                    jQuery(this).children("a").delay(100 * i).animate({
                        left: 0,
                        opacity: 1
                    }, 500);
                });
                
                jQuery(".opensubmenu_level2").find(".sub-menu.open").removeClass("open");
                jQuery(".opensubmenu_level2").removeClass("opensubmenu").removeClass("opensubmenu_level2");
            }else{
                jQuery(".opensubmenu_level1").find(".sub-menu.open").children("li").fadeOut();
                jQuery("#menu-main-menu-mobile").children("li").each(function(i) {
                    jQuery(this).children("a").delay(100 * i).animate({
                        left: 0,
                        opacity: 1
                    }, 500);
                });
                
                jQuery(".opensubmenu_level1").find(".sub-menu.open").removeClass("open");
                jQuery(".opensubmenu_level1").removeClass("open").removeClass("opensubmenu").removeClass("opensubmenu_level1");
                jQuery(this).html('Menu');
            }
        });
    });

Please help, thanks


Solution

  • You should use touch events as click events are unreliable on touch. I use touch end:

    if (isMobile)
        clickEvent = “touchend”;
    else
        clickEvent = “click”;
    
    $(‘#foo’).on(clickEvent, function(e){
        // do something here
    });