angularjs 指令，jquery 类选择器不起作用答案

【问题标题】：angularjs directive, jquery class selector not workingangularjs 指令，jquery 类选择器不起作用
【发布时间】：2013-11-06 13:23:37
【问题描述】：

我有一个显示树视图的角度指令。当您单击 li 图标时，它应该隐藏嵌套的 UL。

这是重要的代码：（这是在一个点击函数中，其中 e 是点击事件）

$toggler=$(e.target).closest('li');
if($toggler.hasClass("collapsed")){
 $toggler.removeClass("collapsed").addClass("expanded");
} else {
  $toggler.removeClass("expanded").addClass("collapsed");
}
$(".collapsed").find("ul").hide();
$(".expanded").find("ul").show();

我可以在调试器中看到该类已被正确分配和删除。但是，它仅适用于我最初将类设置为折叠的第一组 LI。树的更深层次显示类更改，但选择器不适用于它们。有趣的是，当您单击更深的行时，它就像您第一次单击根行一样。之后它什么也不做。

问题：为什么我的选择器不起作用？

这是我的 plunkr：http://plnkr.co/edit/GZ5MZjkir4AaNQmHIxFP?p=preview

【问题讨论】：

标签： javascript jquery css angularjs angularjs-directive

【解决方案1】：

问题是你先申请.collapsed 然后.expanded。因此，如果根扩展，您的孩子总是会扩展。如果你交换它们，它会像预期的那样工作：

$(".expanded").find("ul").show();
$(".collapsed").find("ul").hide();

所以它首先展开所有的孩子。然后它到达第一个.collapsed 孩子，折叠它。在此之后继续折叠.collapsed 孩子，不会带来视觉差异。

【讨论】：

啊，我明白了，find 会返回任何孩子、孙子等，而不仅仅是直系后代。行得通！