jQuery嵌套动画冲突

jQuery nested animation conflict

本文关键字：冲突 动画 嵌套 jQuery      更新时间：2023-09-26

我用下面的代码创建了一个简单的多级推送菜单:

HTML 

<li class="mobile_main_menu_headers">
  <h3 class='expand'>Top</h3>
  <ul class="mobile_main_menu_sub">
     <li class="mobile_main_menu_sub_back">Back</li>
     <li><a href="">Sub</a></li>
     <li><a href="">Sub</a></li>
     <li><a href="">Sub</a></li>
  </ul>
</li>
jQuery 

$(".mobile_main_menu_headers").click(function(){               
    $(this).find('.mobile_main_menu_sub').animate({left:'0px'});
});
$('.mobile_main_menu_sub_back').click(function(){
    $(this).parent('ul').animate({left:'100%'});
});

问题是当点击.mobile_main_menu_sub_back时，动画确实转到left: 100%，但随后立即跳转回left: 0px。我已经创建了一个简单的jsfiddle，您可以在这里查看:

http://jsfiddle.net/M8N6f/

点击Top文本可以看到动画向左滑动。然后点击返回文本查看问题。

我只是想让返回按钮使ul向右移动，就这样。

谢谢

您可以简单地停止事件传播从冒气泡向上通过返回false从背面的事件处理程序li:

$(".mobile_main_menu_headers").click(function(){               
    $(this).find('.mobile_main_menu_sub').animate({left:'0px'});
});
$('.mobile_main_menu_sub_back').click(function(){
    $(this).parent('ul').animate({left:'100%'});
    return false;
});

或者，jQuery有一个函数就是这样做的event.stopPropagation():

阻止事件从冒泡到DOM树，阻止任何父处理程序被通知事件

$(".mobile_main_menu_headers").click(function(){               
    $(this).find('.mobile_main_menu_sub').animate({left:'0px'});
});
$('.mobile_main_menu_sub_back').click(function(e){
    $(this).parent('ul').animate({left:'100%'});
    e.stopPropagation();
});

你可以在这里阅读更多关于事件，事件传播，冒泡和更多。

尝试如下:

$(".expand").click(function(){             
    $('.mobile_main_menu_sub').animate({left:'0px'});
});
$('.mobile_main_menu_sub_back').click(function(){
    $(this).parent('ul').animate({left:'100%'});
});

演示我已经更新了你的代码，使它简单，你为什么要这样写?因为一个特定的原因或者其他你没有包括在这里的功能?

编辑:如果你有多个菜单元素更新演示

$('.mobile_main_menu_sub_back').click(function(){
    $(this).parent('ul').animate({left:'100%'});
    event.stopPropagation(); //Add this line;
});

你的代码不工作的问题是:

您已经将点击事件绑定到.mobile_main_menu_headers，其中包含<li>。所以当你点击<li>中的反向链接时，即使是父.mobile_main_menu_headers点击也是触发的。即事件正在冒泡

您可以通过以下方法解决此问题:

从容器。mobile_main_menu_headers中移除click事件，并将其绑定到。expand element。

$(".expand").click(function(){             
            $('.mobile_main_menu_sub').animate({left:'0px'});
        });

stopeventpropagation，在'。Mobile_main_menu_sub_back '点击事件

$('.mobile_main_menu_sub_back').click(function(e){
    e.stopImmediatePropagation();
    $(this).parent('ul').animate({left:'100%'});
});

或

$('.mobile_main_menu_sub_back').click(function(e){
    $(this).parent('ul').animate({left:'100%'});
    e.stopPropagation();
});
相关文章：