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

示例小提琴

Answer 2

或尝试subcat仅在初始化时隐藏第一个：

$('ul.subcat:first').hide();

演示在这里：http: //jsfiddle.net/kv4dT/