1

こんにちは、jquery でメニューを作成しようとしています。アンカーをクリックするとサブメニューが表示されますが、このサブメニュー内のリンクをクリックすると別のサブメニューが表示されます。

つまり、親 -> 子 -> 孫

問題は、子をクリックすると、さらに拡大するのではなく、そのメニューが閉じられることです。これは、私が望んでいないにもかかわらず、子を読み取って同じJqueryを適用しているためだと思います。

http://jsfiddle.net/4AT8C/

$("#pop-out-left ul li > a").click(function () {
$("#pop-out-left ul li")
    .not($(this).parent())
    .removeClass("active");
$(this).parent().toggleClass("active");
});

$("#pop-out-left ul li ul li a").click(function () {
$("#pop-out-left ul li ul li")
    .not($(this).parent())
    .removeClass("active");
$(this).parent().toggleClass("active");
});

html...

<div id="pop-out-left"> 
<ul>
    <li>
        <a>first</a>
        <ul>
            <li>
                <a> second</a>
                <ul>
                    <li>third level</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a>first</a>

        <ul>
            <li>
                <a> second</a>
                    <ul>
                        <li>third level</li>
                    </ul>                    
            </li>
        </ul>
    </li>
    <li>
        <a>first</a>
        <ul>
            <li>
                <a> second</a>
                    <ul>
                        <li>third level</li>
                    </ul>                       
            </li>
        </ul>
    </li>
</ul>

CSS...

#pop-out-left > ul > li > a + ul {
display: none;
}
#pop-out-left > ul > li.active > a + ul {
display: block;
}

#pop-out-left > ul > li > a + ul > li > ul {
display: none;
}

#pop-out-left > ul > li > a + ul > li.active > ul {
display: block;
}
4

2 に答える 2

0

あなたのセレクターは間違っています。1 つ目は、子の ulli コンボを取得するだけです。これにはさまざまな方法があります。それぞれに異なるクラスを試してみてください...これがあなたのコードですが、機能しています。

$("#pop-out-left > ul > li > a").click(function () {
    $("#pop-out-left > ul > li")
        .not($(this).parent())
        .removeClass("active");
    $(this).parent().toggleClass("active");
});

$("#pop-out-left > ul > li > ul > li > a").click(function () {
    $("#pop-out-left ul > li > ul > li")
        .not($(this).parent())
        .removeClass("active");
    $(this).parent().toggleClass("active");
});
于 2013-03-08T12:02:09.510 に答える
0

うーん....次のようなものが欲しいかもしれません：

フィドル

 $("#pop-out-left ul li").click(function () {
   $("> ul",this).show();
   $(this).siblings().removeClass('active').find('ul').hide();
   $(this).addClass('active');
});
于 2013-03-08T12:06:22.080 に答える