Question

我想在页面加载时隐藏我的树菜单的“ul”的所有后代，然后点击每个“主”“li”链接显示直接孩子，如果直接孩子有孩子（孙子），当点击“孩子”时，我希望它显示“孙子”元素。应该是简单的，但有些我如何搞砸了当我点击主“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!
});

这会将直接儿童排除在初始隐藏之外。

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

1 个答案: