I have the following page on which I have problems with the mobile menu:
By changing the size of the screen to phone resolution, you have a menu with several items that have their own sub-menu. When you click on these items, the hidden sub-menu appears with a slide-down effect, and when you click again or click on another item, the sub-menu is hidden again with slide-up. The problem is that when you "resize" the screen again or scroll or something, the effect goes out of control. Now it happens that when you click once, the slide-down and the slide-up are executed automatically afterwards, that is, the sub-menus are un-hidden and immediately hide themselves. What is wrong?
This is the code:
$(window).on('load resize', function () {
if ($(window).width() >= 1000){
$("#menu-top").removeClass();
$("#menu-top").addClass("desktop");
}else{
$("#menu-top").removeClass();
$("#menu-top").addClass("touch");
$("#menu-top.touch .menu-item-has-children a").addClass("primer-boton").css('cursor','pointer');
$("#menu-top.touch .sub-menu a").removeClass();
$("#menu-top.touch .primer-boton").removeAttr("href");
$('#menu-top.touch .menu-item-has-children > .sub-menu').parent().click(function() {
var submenu = $(this).children('.sub-menu');
if ( $(submenu).is(':hidden') ) {
$(submenu).slideDown(200);
} else {
$(submenu).slideUp(200);
}
});
}
});