1

任意の数または親子アイテムで構成できるメイン メニューがあります。最初にすべての子 UL を非表示にしてから、特定の li をクリックすると子 UL が表示されるようにします。

これがある程度機能していることがここで確認できます: http://jsfiddle.net/JnL58/12/

$("ul.nav_categories ul").hide();

$("ul.nav_categories li").click(function(el){
    el.preventDefault();
    var cur_el = $("> ul", this);
    if (cur_el.length > 0) {
        $("> ul", this).show();
    }
});

私たちが苦労しているのは、関連する UL の APART を、クリックされた要素の親 UL または兄弟 Ul から隠すことです。

したがって、本質的には、ロールオーバーではなくクリックで機能するこのhttp://jsfiddle.net/FjCcT/4/のようなドロップダウンメニューです。

$("ul.nav_categories ul").hide();
$("ul.nav_categories li").hover(function(){
    if ($("> ul", this).length > 0) {
        $("> ul", this).show();
    }
}, function(){
    if ($("> ul", this).length > 0) {
        $("> ul", this).hide();
    }
});

これは、2、3、4、場合によっては 5 アイテムの深さなど、さまざまなレベルで機能する必要があることに注意してください。リストは動的であるため、レベルの数はわかりません。

4

1 に答える 1

1

総編集。もちろん、ソリューションは非常にシンプルでなければなりません。:3

$("ul.nav_categories ul").hide();

$("ul.nav_categories li").click(function(){
    $('li > ul').not($(this).parents('ul')).hide();
    $(this).find('> ul').show();
    return false;
});

http://jsfiddle.net/Bhnzc/3/

于 2013-04-08T21:16:44.567 に答える