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