angularjs 지시문, jquery 클래스 선택자가 작동하지 않습니다.

Question

나는 트리 뷰를 표시하는 각도 지시문을 가지고 있습니다. li 아이콘을 클릭하면 중첩 된 UL을 숨겨야합니다.

다음은 중요한 코드입니다 :

$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(); 

I 클래스가 제대로 할당 및 삭제되는 디버거에서 볼 수있다 (이 전자가 클릭 이벤트 인 클릭 기능이다). 그러나 처음에는 클래스를 축소 된 것으로 설정 한 첫 번째 LI 세트에서만 작동합니다. 트리의 더 깊은 레벨이 클래스 변경을 표시하지만 선택기가 클래스 변경을 표시하지 않습니다. 흥미롭게도 더 깊은 행을 클릭하면 처음으로 루트 행을 클릭하는 것처럼 작동합니다. 그 후에는 아무것도하지 않습니다.

질문 : 선택기가 작동하지 않는 이유는 무엇입니까? http://plnkr.co/edit/GZ5MZjkir4AaNQmHIxFP?p=preview

Answer 1

문제는 먼저 .collapsed 다음 .expanded을 적용한다는 것입니다 :

여기 내 plunkr입니다. 따라서 루트가 확장되면 자녀는 항상 확장됩니다. 스왑하면 의도 한대로 작동합니다.

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

그래서 처음에는 모든 하위 항목을 확장합니다. 그런 다음 첫 번째 .collapsed 아동에게 도달하여 접습니다. 그 후에 시각적 인 차이를 가져 오지 않는 아이들 .collapsed의 붕괴가 계속됩니다.