jQuery list item菜单

我们有一个主菜单，可以包含任何数量或父子项目。我们希望所有的儿童UL都隐藏起来，然后点击给定的儿童UL就会显示UL儿童。jQuery list item菜单

你可以看到这个工作来这里度：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的除了点击元素的父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个项目深。这些列表是动态的，所以我们不会知道关卡的数量。

来源

2013-04-08 paulcripps

什么是不能在第一小提琴的工作？ – adeneo 2013-04-08 21:15:34

'$（“ul.nav_categories ul”）。hide（）;'应该用CSS中的ul.nav_categories ul {display：none;}替换。 – Shikiryu 2013-04-08 21:21:15

adeneo - 在第一个小提琴中，我们需要在单击另一个li时隐藏ul's，所以我们一次只显示一个通过列表的路径。 – paulcripps 2013-04-09 09:06:06

总编辑。当然，解决方案必须非常简单。：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-08 21:16:44 Kaloyan

嵌套菜单不会打开你的jsfiddle – 2013-04-08 21:19:46

点击这只是奇怪..更新。 – Kaloyan 2013-04-08 21:28:03

这几乎可行 - 尽管我认为第二次点击“子页面A（有孩子）”应该关闭该节点。：？ – 2013-04-08 22:08:20

jQuery list item菜单

回答

相关问题