jquery - 如何使菜单在单击父/子项后保持可见

Question

嗨，感谢这个jsfiddle，我的工作正常了:http://jsfiddle.net/cesarvinas/ZQWe7/18

这就是我做的:

http://jsfiddle.net/Kp4nd/5/

如您所见，它添加了一个类并删除了。

如果您单击菜单 1 - 您会看到菜单 1 子菜单项 1 也处于事件状态。但是当我点击菜单 1 子菜单 2 时，子菜单 1 仍然处于事件状态。

我已经把<li><a href="#">MENU 1</a>之间<span></span>这样就成功了。但现在我的菜单不再保持事件状态...

然后我遇到了另一个问题。当您单击菜单 2 时，菜单 1 子菜单 1 也会处于事件状态，这应该是菜单 2 子菜单 1。

我该如何解决它需要正确的第一个子项的问题？

谢谢!

Answer 1

请参阅: Sample

$('ul li').click(function (e) {
  e.preventDefault();
  $(this).siblings().removeClass('currentParent');
  $(this).addClass('currentParent');
  $(this).find('ul li:first').addClass('currentChild').siblings().removeClass('currentChild').addClass('notSelected');
});

$('ul li ul li').click(function (e) {
  e.preventDefault();
  $(this).siblings().removeClass('currentChild').addClass('notSelected');
  $(this).removeClass('notSelected').addClass('currentChild');
  e.stopPropagation();
});