Question

我有一个显示树视图的角度指令。单击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。树的更深层次显示类更改，但选择器不适用于它们。有趣的是，当您点击更深的行时，它就像您第一次单击根行一样。之后它什么也没做。

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

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

Answer 1

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

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

所以它首先扩展所有孩子。然后它到达第一个.collapsed孩子，折叠它。在此之后，.collapsed个孩子继续崩溃，没有任何视觉差异。

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

1 个答案: