jquery在ul li多对多孩子之间切换

Question

检查我的 html 代码如下。 我想要如果 Level1 单击它会隐藏它的所有子级ul和 level1 的li然后如果单击它它会再次显示我的意思是在它们之间切换。 像这样，如果我点击 Level2，它只会像 Level1 一样切换它的孩子ul和li 。 但是按照我目前的第一步，我试图在 Level1 上切换，但是一旦我单击 Level1，问题就完全被隐藏了，不会再回来了。 任何人都可以告诉我如何实现这一目标？

这是我的小提琴链接

网址：

<ul>
 <li class="l1">
 <a href="#">Level1</a>
  <ul>
      <li>
          <a href="#">Level2</a>
          <ul>
          <li><a href="#">Level2 child</a></li>
          <li><a href="#">Level2 child</a></li>
          <li><a href="#">Level2 child</a></li>
          </ul>
      </li>
      <li><a href="#">Level2</a></li>
      <li><a href="#">Level2</a></li>
  </ul>
</li>
 <li class="l1">
 <a href="#">Level1</a>
  <ul>
      <li><a href="#">Level2</a></li>
      <li><a href="#">Level2</a></li>
      <li><a href="#">Level2</a></li>
  </ul>
</li>
</ul>

查询：

 $(document).ready(function () {

  $('.l1').on('click',function(){

    $(this).toggle();
    //alert("clicked");

  });


 });

Answer 1

我认为您面临的问题是您正在选择整个元素而不仅仅是它的子元素。 查看以下 JS，让我知道这是否是您要找的

$(document).ready(function () {
  $('.l1').on('click',function() {
    $(this).find("ul").toggle();
  });
});