Question

检查下面的html代码。我想在那里，如果单击Level1，它将隐藏它的所有子级ul和li，然后如果单击它，它将再次显示，我的意思是在它们之间切换。像这样，如果我单击Level2，它将像Level1一样仅切换其子级ul和li。但是按照我当前的第一步，我试图打开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();
  });
});

jQuery在ul li多对多子之间切换

1 个答案: