목록 트리 구조가 작동하지 않음

중첩 목록의 트리 구조가 있습니다. 사용자가 클릭 할 때까지 중첩 된 목록을 숨기려고하므로 toggle()을 호출합니다. 내가 클릭하면 순간 http://jsfiddle.net/kuv4tkqv/목록 트리 구조가 작동하지 않음

: 가 여기 내 코드입니다 :

var $list = $('#subject-list'); 
     var data = [ 
      { name: "A" }, 
      { name: "B" }, 
      { name: "C" }, 
      { 
       name: "G", 
       children: [ 
        { 
         name: "D", 
         children: [ 
          { name: "1" }, 
          { name: "2" }, 
          { name: "3" } 
         ] 
        }, 
        { name: "E" }, 
        { name: "F" }      
       ] 
      } 
     ]; 

     var populateSubjectTree = function (data, list) { 
      for (var i = 0; i < data.length; i++) {     
       if (typeof (data[i].children) !== "undefined") { 
        var listItem = $('<li class="no-style"><input class="checkbox-he" type="checkbox"><label class="label-pointer">&nbsp;' + data[i].name + ' <span class="glyphicon glyphicon-collapse-down"></span></label><ul class="has-children collapse"></ul></li>'); 
        list.append(listItem); 
        var childList = listItem.find('ul'); 
        populateSubjectTree(data[i].children, childList); 
       } else { 
        var listItem = $('<li class="no-style"><input class="checkbox-he" type="checkbox"><label>&nbsp;' + data[i].name + '</label></li>'); 
        list.append(listItem); 
       } 
      } 

      list.find('label').click(function() { 
       if ($(this).siblings('ul').length > 0) { 
        console.log($(this).siblings('ul')); 
        $(this).siblings('ul').toggle(); 
       } 
      }) 
     };

트리의 최상위 목록 항목에 대한 미세하지만 낮은 수준의 것들에 대한 작동하는 것 같다, 여기 jsfiddle입니다 항목 G는 괜찮지 만 중첩 된 요소에는 없습니다. D. 문제는 무엇입니까?

출처

2014-09-24 user3281466

그래서 G를 클릭하고 자녀를 토글하고 싶습니까? –

잘 클릭하면 G는 직접적인 자녀 만 토글해야합니다. 그런 다음 D를 클릭하면 직접적인 하위 항목도 전환해야합니다. 그래서 그들은 어떤면에서 서로 독립적입니다. – user3281466

즉, 아래 funcition를 사용 $ ('. 라벨 포인터') 대신 list.find ('라벨') 당신은 단지 추가해야

  $('.label-pointer').click(function() { 
      if ($(this).siblings('ul').length > 0) { 
       console.log($(this).siblings('ul')); 
       $(this).siblings('ul').toggle(); 
      } 
      })

대신

 list.find('label').click(function() { 
      if ($(this).siblings('ul').length > 0) { 
       console.log($(this).siblings('ul')); 
       $(this).siblings('ul').toggle(); 
      } 
     })

출처

2014-09-24 12:12:01 Shamanth

흠, 작동하지만 왜 이해가 안되요. 라벨을 타겟팅 할 때 이미 토글()을 호출하기 전에 중첩 목록이 있는지 확인하고 있습니다. 여기서 무슨 일이 일어나는지 설명해 주시겠습니까? – user3281466

list.find ('. label-pointer')에 $ ('. label-pointer')를 변경하면 문제가있는 것 같습니다. – user3281466

list.find ('label')가 두 개 이상의 객체를 반환하면 2) 당신은 그들을 통해 반복하고 토글 기능과 그들 모두를위한 클릭 이벤트를 바인딩해야합니다. – Shamanth

의 e.preventdefault();

list.find('label').click(function() { 
       if ($(this).siblings('ul').length > 0) { 
        console.log($(this).siblings('ul')); 
        $(this).siblings('ul').toggle(); 
         e.preventdefault(); 
       } 
      })

출처

2014-09-24 12:25:23

목록 트리 구조가 작동하지 않음

답변

관련 문제