如何隱藏未被點擊的ul並在Jquery中顯示子菜單？

Question

我有一個使用html列表的下拉菜單。 jquery代碼在第一級工作正常，但是當我嘗試點擊列表上的某個子菜單時，它會關閉並重新打開相同的列表。

我怎樣才能打開一切，但我點擊的列表？

// Document Listening 
$(document).ready(function() { 

    // JQuery running fine, don't need CSS trick for dropdown 
    // Remove the class of child and grandchild, this removes the CSS 'falback' 
    $("#nav ul.child").removeClass("child"); 
    $("#nav ul.grandchild").removeClass("grandchild"); 

    // When a list item that contains an unordered list is hovered on 
    $("#nav li").has("ul").click(function (e) { 
     $("#nav li").children("ul").not(e.target).slideUp("fast"); 
     $(this).children("ul").slideDown("fast"); 
    }); 

}); 

// Document Click 
// Click on anything else other then the link you clicked and close 
$(document).mouseup(function (event) { 
    if (!$(event.target).closest("#nav li").length) { 
     $("#nav li").children("ul").slideUp("fast"); 
    } 
}); 

Answer 1

這是因爲當你點擊一個子菜單時，點擊li和父li的事件被觸發。調用stopPropagation將會阻止這一點。

另外，當你點擊一個孩子li時，你滑動除了被點擊的li之外的所有li，這也會滑向父母。更改.not語句以排除目標和所有父母。

$("#nav li").has("ul").click(function (e) { 
    $("#nav li").children("ul").not($(this).parents()).slideUp("fast"); 
    $(this).children("ul").slideDown("fast"); 
    e.stopPropagation(); 
}); 

這裏的工作小提琴： http://jsfiddle.net/qnzsS/1/