Javascript 多次单击时停止设置子菜单的动画

我有一个子菜单，可以从屏幕左侧（左侧：-662px）滑动到左侧：342px。单击主菜单项时会触发此操作

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

这仅在元素动画期间发生-如果在子菜单完成动画制作后单击主菜单项，则它会按原样移回-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

//如果显示，则隐藏
$（“#菜单ul li”）。单击（函数（）{
$（“#菜单ul li ul”）。每个（函数（）{
//获取子菜单的当前位置
var sub2pos=$（this.css（'left'）；
//如果边距大于340PX，则隐藏菜单
sub2pos=parseInt（sub2pos）；
如果（sub2pos>340）{
$（this.stop（）.animate（{left:'-=662px'}，400）；
}
})；//结束每个函数
});//结束第一次单击功能
//如果是隐藏的，则显示
$（“#菜单ul li”）。单击（函数（）{
//获取子菜单的当前位置
var sub2pos=$（this）.children（'ul'）.css（'left'）；
//如果边距小于342PX，则显示菜单
sub2pos=parseInt（sub2pos）；
if（sub2pos<342）{
$（this）.children（'ul'）.delay（500）.stop（）.animate（{left:'+=662px'}，400）；
}
});//结束第二次单击功能

---

编辑：我在这里创作了一把小提琴。注意如果快速单击菜单项会发生什么情况

我相信我发现了问题：

---

我应该在第二条if语句中更具体地说明子菜单滑出的地方。我想提出一些建议，而不是

：

将显示和隐藏逻辑移动到带有if elseif块的函数，以决定执行哪一个

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

然后绑定。单击事件仅一次并调用该函数

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

然后在设置菜单动画之前和之后，在函数中协调取消绑定/绑定单击事件

更多的代码更新到你的小提琴

-请注意，我在代码中使用了开/关。使用bind/unbind进行解释，因为它们听起来语法正确。
请注意，sub2pos<“342px”是字符串比较，它不符合您的预期。@Bemmu您是对的，我已经解决了它，但我原来的问题仍然存在。您需要记录您的sub2pos控制台。log（sub2pos）并查看在父菜单上快速连续单击时发生的情况：）@TonyShih yes它根据子菜单位置在每次单击时注册不同的值。嗯，我需要一种方法，只有在动画完成后，点击才能再次生效