jquery - 如何隐藏未单击的 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，这也会向上滑动父 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/