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 回答