javascript - 停止多次点击时的子菜单动画

Question

我有一个子菜单，可以从屏幕左侧(左侧:-662px)滑动到左侧:342px。这是在单击主菜单项时触发的。

如果再次单击主菜单，子菜单将退回到 -662px。我的问题是，如果快速连续单击主菜单项，则子菜单元素会一次在页面上移动 342 像素。它没有按预期来回移动。

这只发生在元素动画期间 - 在子菜单完成动画后单击主菜单项，它会按应有的方式移回 -662px。

我尝试添加 .stop() 没有影响。有谁知道如何解决这个问题吗？

//IF IS SHOWN, HIDE
$("#menu ul li").click(function() {
  $("#menu ul li ul").each(function() {
   //GET SUBMENUS CURRENT POSITION  
    var sub2pos = $(this).css('left');
       //IF MARGIN IS GREATER THE 340PX HIDE THE MENU
        sub2pos = parseInt(sub2pos);
        if(sub2pos > 340){
         $(this).stop().animate({ left: '-=662px' }, 400 );
      }
  });//END EACHFUNCTION
});//END 1st CLICK FUNCTION

//IF IS HIDDEN, SHOW
$("#menu ul li").click(function() {
      //GET SUBMENUS CURRENT POSITION
      var sub2pos = $(this).children('ul').css('left');
      //IF MARGIN IS LESS THEN 342PX SHOW THE MENU
       sub2pos = parseInt(sub2pos);
      if(sub2pos < 342){
           $(this).children('ul').delay(500).stop().animate({ left: '+=662px' }, 400 );
      }
});//END 2nd CLICK FUNCTION

编辑:我在这里创建了一个 fiddle 。 http://jsfiddle.net/q5Htx/19/请注意如果快速单击菜单项会发生什么

Answer 1

我建议一些事情:

将显示和隐藏逻辑移至带有 if-elseif block 的函数中，以决定执行哪一个。

function menuClickHandler(menu){//logic goes here}

然后仅绑定(bind) .click 事件一次并调用该函数。

$(document).ready(function(){ 
    $("#menu ul li").on('click', function(e) { 
        menuClickHandler($(this)); 
    });
});

然后在菜单动画之前和之后在函数中编排点击事件的取消绑定(bind)/绑定(bind)。

更多代码here在你的 fiddle 更新中

- 请注意，我在代码中使用了开/关。使用绑定(bind)/取消绑定(bind)来解释，因为它们听起来语法正确。