0

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");
    }
});
4

1 に答える 1

0

これは、サブメニューをクリックすると、クリックされた li と親 li の両方に対してイベントが発生するために発生します。stopPropagation を呼び出すと、それが防止されます。

さらに、子李をクリックすると、クリックした李以外のすべての李が上にスライドし、親も上にスライドします。.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/

于 2013-06-27T19:14:56.293 に答える