javascript - 切换列表，点击项目显示所有子项目而不是仅来自项目的子项目

Question

抱歉，标题模糊，但我找不到合适的标题，很好地解释了问题。

问题:我写了一个切换列表的代码。它按照我想要的方式工作。当我单击“headcategory”时，它会打开子类别等。当我第一次单击 headcategory 时出现问题，它会打开每个列表，这不是我想要的。当我关闭并再次打开它时，它会按应有的方式工作。我试图弄清楚为什么会那样做，但我不知道。因此，如果有人可以帮助我，他/她将不胜感激。

JQuery 代码。

$(document).ready(function()
{
$('ul.subcat').hide();

$('li').click(function(event)
{ 
    event.stopPropagation();
    $('ul', this).toggle(); 

});
});

HTML代码

<ul class="headcat">
  <li>item 1
  <ul class="subcat">
    <li>subitem 1
    <ul class="subcat">
      <li>subsubitem 1
      <ul class="subcat">
        <li><p>text</p></li>
      </ul>
      </li>
      <li>subsubitem 2
      <ul class="subcat">
        <li><p>text</p></li>
        <li>subsubsubitem 1
        <ul class="subcat">
          <li><p>text</p></li>
        </ul>
        </li>
        <li>subsubsubitem 2</li>
      </ul>
      </li>
    </ul>
    </li>
    <li>item 2</li>
  </ul>
  </li>
</ul>  

Answer 1

你只需要选择当前点击的 li 的直接后代，试试这个:

$(this).children("ul").toggle();

以下内容也可以使用，但是使用 > 后代选择器之前没有主元素的情况不被认为是最佳实践。

$('> ul', this).toggle(); 

Example fiddle