0

我有一个子菜单，它从屏幕左侧（左侧：-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

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

4

2 回答 2

2

我建议几点：

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

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

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

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

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

更多代码在这里更新你的小提琴

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

于 2013-03-13T07:41:48.097 回答
0

我相信我发现了问题：

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

于 2013-03-13T07:02:28.193 回答