jQuery的简单的菜单

Question

我需要建立同这一个菜单：

http://www.girard-perregaux.com/collection/univers-en.aspx?type=1

请单击，然后在制造商的集合，然后再打开制造商关闭。正如你首先看到的那样，它会滑落，然后它只是改变链接而不会再次滑动，直到你点击同一个打开的元素。

我第一次尝试这样的：

$('ul.sub-menu').hide(); 
$('.sf-menu').children('li').click(function(){ 
    $(this).children(".sub-menu").slideToggle('slow'); 
    $('ul.sub-menu').hide(); 

它的工作，但它的点击菜单上，而不是仅仅改变列表项，每次上下滑动。所以我发现我需要以某种方式针对儿童li元素而不是ul。此外，如果你parrent列表项之间点击，它需要切换这样的菜单上，但如果我在同一个打开的列表项再次点击，它需要关闭（向上滑动）

非常感谢这是我半年时间一天试图找出答案。另外如何瞄准儿童李，我试过这个：

$('.sf-menu').children('li').click(function(){ 

$(this).children(".sub-menu li") 

但没什么。

Answer 1

您可以尝试点击绑定到子菜单和使用e.stopPropagation()和e.stopImediatePropagation()：http://jsfiddle.net/7eCjd/

$menu.find(">li>ul").on("click", function(e) { 
    e.stopPropagation(); 
    e.stopImediatePropagation(); 
}); 

这将不允许子菜单关闭，当你点击它们。