Jquery скрывает всех потомков тега ul ... показывая дочерние элементы как древовидное меню

Question

Я хочу скрыть все потомки «ul» для моего древовидного меню, когда страница загружается, тогда при нажатии каждой ссылки «main» «li» отображается прямой дочерний элемент, и если прямой дочерний элемент имеет дочерних элементов ( grandchild), когда нажимается «Child», я хочу показать элементы «grandchild». должно быть просто, но кое-как я облажался, и когда я щелкаю по главному «li» (заголовок 1), он отображает всех потомков (включая «Подстраницу A - 1»), а не только прямых потомков ( «Подстраница A»). Что, я думаю, означает, что дети, внуки и т. Д. Никогда не были скрыты с самого начала .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!
});

Это исключит прямых детей из первоначального скрытия.