javascript - 自定义手机导航

Question

我正在尝试编写自己的简单动画移动导航...

我有一个基本的工作版本，但我无法让它正确返回...

如果您单击“产品”，会出现子菜单，在子菜单的顶部会显示“<产品”​​，单击后该菜单应滑回，只是它什么都不做...

每次您单击任何链接时，我都不确定我的顶级功能是否正在运行？希望 jsfiddle 更有意义......

http://jsfiddle.net/0o5jppts/

$('.mobile-nav ul.parent-level li').on('click', function (e) {
   $('ul.level-one').css('left', 0);
   e.preventDefault();
   console.log('clicked;');
});
 $('.mobile-nav ul.level-one li').on('click', function (e) {
   if (!$(this).hasClass('back-title')) {
       $('ul.level-two').css('left', 0);
   }
   e.preventDefault();
});
    //alert('go back');
   $(this).parent().css('left', '120px');
});

Answer 1

发现问题了!当点击li.back-title时，调用第三个点击处理器，将ul.level-one的left设置为 100px，然后调用第一个点击处理程序，将其设置回 0，就好像什么都没发生一样。解决方法是调用 e.stopPropagation();在第三个点击处理程序的末尾。