slideDown & slideUp问题

Question

我有以下响应站点，我对移动导航菜单有问题：

http://www.endeavor.cl/

当您调整窗口的大小或将其加载到移动设备中时，您有一个具有向下滑动效果的带有子菜单项的菜单，每次单击它们时都会显示子菜单项，如果再次单击或单击其他地方，子菜单项将以幻灯片向上的效果隐藏自己。问题是，当您再次调整窗口大小并再次单击子菜单项时，它们现在将显示并立即隐藏，就像它们无需等待第二次单击就执行这两个步骤一样。

​

$(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

这是因为每次窗口重新调整代码附加事件侦听器的大小。所以它在调整尺寸后会发射两次。首先显示菜单，然后隐藏它。

您真的需要resize在on事件中吗？也许load就能满足你的期望