녹아웃을 사용한 동적 접을 수있는 목록

Question

나는 녹아웃을 사용하여 데이터를 생성하고 있습니다. 결합 template 사용 :

<ul class="category-list-group" data-bind="template: {name: 'categoryTemplate', foreach: $data.categoryRoot}"></ul> 

// --- Template 
<script id="categoryTemplate" type="text/html"> 
    <li data-toggle="collapse" class="collapse" data-bind="css: hasChild, attr: {'data-target': '#' + name().replace(/\s+/g, '') }"> 
     <a> 
      <!-- ko text: name--><!-- /ko --> 
     </a> 
     <ul class="collapse" data-bind="template: { name: 'categoryTemplate', foreach: children },attr: { id: name().replace(/\s+/g, '') }"></ul> 
    </li> 
</script> 

결과는이 jsfiddle이다. 이상한 부분은 자녀와 함께 목록을 접을 때입니다. 접는 목록을 수정하려면 어떻게해야합니까?

참고 : jsfiddle에서 녹아웃 바인딩을 삭제했습니다. 방금 HTML을 표시합니다.

Answer 1

자식 클릭이 각 부모 컨테이너에 버블 링되기 때문에 축소가 재미 있습니다. 접힌 부분을 컨테이너 대신 < > 개의 태그로 이동하면 축소 동작을 수정할 수 있습니다.

<ul class="category-list-group"> 
    <li class="collapsed" aria-expanded="false"> 
     <a class="has-child" data-toggle="collapse" data-target="#Concert"> 

https://jsfiddle.net/7kmmh68p/4/

내가 본 유일한 다른 대안

는 event.stopPropagation 어떤 종류의()를 사용하는 모든 부모 컨테이너에 품어없이 자식 이벤트가 화재 있도록.