可擴展的子菜單與子子菜單

Question

所以我試圖創建一個簡單的邊欄使用嵌套列表元素是3級深，所以有一個菜單，子菜單和子子菜單。一切似乎按預期工作，唯一的問題是，當我在最深層次的列表元素（子子菜單）中，並且我選擇一個選項時，我的jquery事件以某種方式衝突，並且無意中摺疊了菜單。我嘗試使用類特定的選擇器來防止這個問題沒有成功。我想點擊一個子菜單而不是摺疊父列表。當子菜單打開子菜單選項並且用戶選擇不同的子菜單選項（隱藏當前的子菜單）時，然後返回到剛剛摺疊的初始子菜單，子菜單選項仍然顯示，應該隱藏它們。

JQuery的

$('.docs-index-li-ul').hide(); 
$('.doc-index-li > a').click(function(){ 
    $('.docs-index-li-ul').hide(); 
    $(this).next('ul').show(); 
}); 
$('.doc-index-li .docs-index-li-ul li ul li').hide(); 
$('.docs-index-li-ul li > a').click(function(){ 
    $('.docs-index-li-ul li ul li').hide(); 
    $(this).next('ul').children('li').show(); 
}); 

這裏有一個小提琴：

http://jsfiddle.net/q7vay/

我明白爲什麼這種情況正在發生，以及如何解決它的任何建議。

非常感謝提前！

Answer 1

我做了兩件事情：

$('.docs-index-li-ul > li > a').click(function(){ 

增加了孩子選擇在這裏，所以你只得到即時li小號反應。然後補充說：

$('.doc-index-li .docs-index-li-ul li ul li a').click(function(e){ 
    e.stopPropagation(); 
}); 

要停止傳播被點擊的子子菜單錨時：

JSFiddle