javascript - angularjs 指令，jquery 类选择器不工作

Question

我有一个显示 TreeView 的 Angular Directive(指令)。当您单击 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

Answer 1

问题是您首先应用 .collapsed，然后应用 .expanded。所以如果根被扩展，你的 child 总是被扩展。如果你交换它们，它会像预期的那样工作:

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

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