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

Answer 2

或者尝试仅在init上隐藏第一个subcat：

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

DEMO：http://jsfiddle.net/kv4dT/

切换列表，单击项目将显示所有子项目，而不是仅显示项目中的子项目

2 个答案: