自定义移动导航

Question

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

我有一个基本的工作版本，但我不能让它正确回去...

如果点击“产品”，子菜单会出现，在子菜单的顶部显示'＆lt;产品'，一旦点击该菜单，然后应该滑回，只有它什么都不做......

我不确定每次点击任何链接时我的顶级功能是否都在运行？希望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时，将调用第三个单击处理程序，将left的{​​{1}}设置为ul.level-one，然后调用第一个单击处理程序，将其设置回{ {1}}好像什么都没发生。解决方法是在第三个单击处理程序的末尾调用e.stopPropagation();。