Question

我有以下响应式网站，我遇到了移动导航菜单的问题：

http://www.endeavor.cl/

当您调整窗口大小或将其加载到移动设备中时，您会看到一个菜单，其子菜单项具有下拉效果，每次单击它们时都会显示子菜单项，如果单击它们再次或点击其他地方，子菜单项将隐藏自身与滑动效果。问题是当您再次调整窗口大小并再次单击子菜单项时，它们现在将显示并立即隐藏，就像它们执行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

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

你真的需要resize事件on吗？也许load只会满足您的期望

slideDown＆amp; slideUp问题

1 个答案: