使用jQuery折叠层次结构中的嵌套列表

Question

我有一个非常烦人的问题，这可能是我对javascript和jQuery缺乏了解的产物。

我有一个使用递归启用层次结构的列表，它看起来如下

 $(function (){ $('#foo').click(function() { $(this).children('ul').slideToggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li id='foo'>A <ul> <li id='foo'>B <ul> <li> Sub-sub </li> </ul> </li> </ul> </li> </ul> 

我正在尝试完成折叠功能，以便当用户单击“ A”时所有子元素都折叠，并且如果她单击“ B”节点，则所有“ B”子元素都折叠。 但是，无论如何，我总是最终以id ='foo'折叠所有列表。

在我眼里，$（this）.children（'ul'）。slideToggle（）; 会折叠孩子，因为$（this）指向单击的列表元素...？

到现在为止已经很久了，希望能有所帮助！

Answer 1

在这里，您... HTML不变。 但是像其他建议一样，您需要具有唯一的ID

 $(function (){ $('li').click(function(event) { event.stopPropagation(); $(event.target).children('ul').slideToggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li id='foo'>A <ul> <li id='foo'>B <ul> <li> Sub-sub </li> </ul> </li> </ul> </li> </ul>