slideDown 和 slideUp 问题

Question

我有以下响应式网站，但移动导航菜单有问题：

http://www.endeavor.cl/

当您调整 window 的大小或将其加载到移动设备中时，您会看到一个包含子菜单项的菜单，该菜单项具有向下滑动效果，每次您单击它们时都会显示子菜单项而且，如果您再次单击它们或单击其他地方，子菜单项将以向上滑动的效果自行隐藏。问题是当您再次调整 window 的大小并再次单击子菜单项时，它们现在会显示并立即隐藏，就像它们无需等待第二次单击即可执行 2 个步骤。

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

那是因为每次 window 重新调整代码附加事件侦听器的大小。所以它在调整大小后会触发两次。先显示菜单再隐藏。

on 活动中您真的需要 resize 吗？也许只是load就能满足你的期望

slideDown 和 slideUp 问题

slideDown & slideUp issue

jquery

slidetoggle