Question

我使用以下代码创建了一个简单的多级推送菜单：

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/

单击顶部文本以查看左侧的动画幻灯片。然后点击后退文字以查看问题。

我只想按返回按钮将ul设置为右边的动画，就是这样。

由于

Answer 1

您可以通过从背面li的事件处理程序返回false，从冒泡向上停止事件传播：

$(".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;
});

EXAMPLE

或者，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();
});

EXAMPLE

您可以阅读有关事件，事件传播，冒泡等内容的更多信息here。

Answer 2

尝试以下：

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

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

DEMO HERE 我已经更新了你的代码并简单了，为什么你这样写呢？由于特定原因或其他功能，您没有在此处包含？

编辑：如果你有多个菜单元素 Updated DEMO

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

Answer 3

您的代码无效的问题是：

您已将点击事件绑定到.mobile_main_menu_headers，其中包含<li>。因此，当您单击<li>中的后退链接时，即使父.mobile_main_menu_headers点击也会触发。即事件正在冒泡

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

从容器.mobile_main_menu_headers中删除click事件，并将其绑定到.expand元素。

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

stopEventPropogation，在'.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();
});

jQuery嵌套动画冲突

3 个答案: