Question

我有一个从屏幕左侧（左：-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

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

Answer 1

我会建议一些事情：

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

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

然后只绑定.click事件一次并调用该函数。

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

然后在动画菜单之前和之后编排功能中单击事件的取消绑定/绑定。

更新小提琴中的更多代码here

- 我在代码中使用开/关的注意事项。使用bind / unbind来解释，因为它们听起来语法正确。

Answer 2

我相信我发现了这个问题：

我应该更详细地介绍子菜单滑出的第二个if语句。而不是<342我应该指定元素的负面位置：<= -662。这样，如果div位于left 150px或其他任何位于+342和-662之间的位置，则不会触发动画。

多次点击停止动画子菜单

2 个答案: