jquery在多个孩子之间切换

Question

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

这是我的fiddle link

HTML：

<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>

jQuery的：

 $(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();
  });
});