slideDown & slideUp issue

Question

I have the following responsive site and i'm having an issue with the mobile nav menu:

http://www.endeavor.cl/

When you resize the window or load it in a mobile device, you have a menu with sub-menu items with a slide-down effect that show you the sub-menu items everytime you click on them and, if you click them again or click somewhere else, the sub-menu item will hide itself with a slide-up effect. The problem is when you resize the window again and click again the sub-menu items, they will now show and inmediately hide, like they execute the 2 steps without waiting for a second clicking.

$(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(900);
        }
      });
      
    }

  });

Answer 1

That is because everytime window resize your code attach event listener again. So it fires twice after resize. Firstly showing menu and then hiding it.

Do you really need that resize in on event? Maybe just load will meet your expectations