Question

我在html中有一些嵌套的项目列表。我尝试使用jquery在用户单击元素时显示子元素。一旦它们被隐藏，我就不会出现任何元素。

这是我的HTML：

<ul class="NavigationMenu">
    <li>animal
        <ul>
            <li>cat</li>
            <li>fish</li>
            <li>dog
                <ul>
                    <li>husky</li>
                    <li>bulldog</li>
                    <li>german shepherd</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>plant
        <ul>
            <li>tree</li>
            <li>shrub</li>
            <li>flower
                <ul>
                    <li>lily</li>
                    <li>rose</li>
                    <li>sunflower</li>
                </ul>
            </li>
        </ul>       
    </li>
    <li>rock
        <ul>
            <li>sedimentary</li>
            <li>limestone</li>
            <li>slate</li>
        </ul>
    </li>
</ul>

这是我的jquery：

<script>
    $(document).ready(function(){
      $("li > ul > li").hide();
      $("li").click(function(){
        $(event.target).children().show();
      });
    });
</script>

我希望所有嵌套列表项都隐藏在页面加载上，它们就是这样。但是，我希望任何被点击的项目都会显示其子元素。他们不是。奇怪的是，如果我在页面加载时不隐藏元素并将我的点击事件从show（）更改为hide（），则会在点击父元素时隐藏子元素。

我错过了什么。谢谢你的帮助。

Answer 1

我认为你可以这样做：

CSS

.NavigationMenu > li > ul { display: none; }

JS

$(document).ready(function(){
  $(".NavigationMenu > li").click(function(){
    $(this).children("ul").show();
  });
});

Answer 2

您遇到的问题是$("li > ul > li").hide();隐藏了li的直接后代的所有ul。点击li后，唯一隐藏的是ul元素。

在文档树中搜索您最初隐藏的相同元素是您要执行的操作$(this).find("ul>li").show()。 Fiddle

Answer 3

有几个问题。

首先，li的孩子不能是li，这就是隐藏的内容。孩子将是ul，而隐藏的li将是那个

的孩子

其次，您尚未在点击处理程序

中定义event

试试这个

 $("li").click(function(){
    $(this).find('li').show();
  });

为什么隐藏的元素不会出现在jquery show（）中？

3 个答案: