Jquery 隐藏 ul 标签的所有后代...将子元素显示为树菜单

Question

我想在页面加载时隐藏树形菜单的“ul”的所有后代，然后单击每个“main”“li”链接时显示直接子级，并且如果直接子级有子级(孙子)，当单击“子”时，我希望它显示“孙子”元素。应该很简单，但是我是如何把事情搞砸的，当我点击主“li”(标题1)时，它显示所有后代(包括“子页面A - 1”)，而不仅仅是直接子页面( “子页面 A”)。我认为这意味着 child 、孙子等从来没有从 .hide() 开始隐藏。我真正想要发生的是隐藏所有后代(主要的顶级标题除外)，并且当我沿着树走下去时根据需要显示子级。关于如何实现这项工作有什么建议吗？

这是 HTML:

<ul id="nav">
<li>Heading 1
    <ul>
        <li>Sub page A
            <ul>
                <li>Sub page A - 1</li>
                <li>Sub page A - 3</li>
                <li>Sub page A - 2</li>
            </ul>
        </li>
        <li>Sub page B</li>
        <li>Sub page C</li>
    </ul>
</li>
<li>Heading 2
    <ul>
        <li>Sub page D</li>
        <li>Sub page E</li>
        <li>Sub page F</li>
    </ul>
</li>
<li>Heading 3
    <ul>
        <li>Sub page G</li>
        <li>Sub page H</li>
        <li>Sub page I</li>
    </ul>
</li>

这是我的 Jquery:

$(function(){
$('#nav ul').hide(); //Supposed to Hide all <ul> tags for all descendents, but doesn't work                             
    $('#nav>li').mouseover(function(){ $(this).addClass("a_hand") }); //Add the class that displays the hand                    
    $('#nav>li').toggle(function() {
        $(this).find('ul').slideDown(200);
    }, function() {
        $(this).find('ul').slideUp(200);
    });//END TOGGLE
});//END MAIN FUNCTION

谢谢。

Answer 1

你可以这样做:

$(function(){
  $("#nav>li ul").hide();
  $('#nav>li').click(function() {
    $(this).children('ul').slideToggle(200); //Hides if shown, shows if hidden
  }).mouseover(function(){ $(this).addClass("a_hand") }); //Hand!
});

这将从初始隐藏中排除直接子级。