여러 수준에서 선택 가능한 jQuery UI

Question

여러 수준의 선택이 필요하지만 선택 기능은 자식보다는 부모를 먼저 트리거하고 자식을 등록하지 않는 경우도 있습니다. 나는 다음과 같이하고 싶다 :

<ul> 
    <li>Level 1a 
    <ul> 
     <li>Level 2a</li> 
     <li>Level 2b</li> 
    </ul> 
    </li> 
    <li>Level 1b 
    <ul> 
     <li>Level 2c</li> 
     <li>Level 2d</li> 
    </ul> 
    </li> 
</ul> 

레벨 2 아이템을 클릭하는 방법에 대한 아이디어가 있으십니까? 레벨 2를 선택할 때 부모를 선택 취소하고 강조 표시된 레벨 2 만 표시하도록 무시하려고합니다.

Answer 1

: 나는 이것을 좋아하지 않았다

<ul> 
    <li>Level 1a</li> 
    <ul> 
     <li>Level 2a</li> 
     <li>Level 2b</li> 
    </ul> 
    </li> 
    <li>Level 1b</li> 
    <ul> 
     <li>Level 2c</li> 
     <li>Level 2d</li> 
    </ul> 
    </li> 
</ul> 

, I 설정 때문에 구조와 같은 :

<div class="selectable"> 
    <div id="level1">Level 1</div> 
    <div class="subgroup level1"> 
    <div id="level1a">Level 1a</div> 
    <div id="level1b">Level 1b</div> 
    </div> 
    <div id="level2">Level 2</div> 
    <div class="subgroup level2"> 
    <div id="level2a">Level 2a</div> 
    <div id="level2b">Level 2b</div> 
    </div> 
</div> 

I처럼 다음 설치 선택 가능한 : 이것이하는 일은 어떤 하위 그룹을 제외한 선택기를 div에 만들 것입니다

$('.selectable').selectable({ 
    selected: function (event, ui) { 
    if ($(ui.selected).hasClass('click-selected')) { 
     $(ui.selected).removeClass('click-selected'); 
     $('.'+ui.selected.id).removeClass('click-selected'); 
     $('.'+ui.selected.id+' div').removeClass('click-selected'); 
    } else { 
     $(ui.selected).addClass('click-selected'); 
     $('.'+ui.selected.id).addClass('click-selected'); 
     if ($(ui.selected).parent('.subgroup').length) { 
     $(ui.selected).parent('.subgroup').removeClass('click-selected'); 
     var cNames = $(ui.selected).parent('.subgroup').attr('class').replace("subgroup","").split(" "); 
     $.each(cNames, function(i,c){ 
      if ($(ui.selected).parent('.subgroup').children().length == $(ui.selected).parent('.subgroup').children('.click-selected').length) { 
      $('#'+c).addClass('click-selected'); 
      } else { 
      $('#'+c).removeClass('click-selected'); 
      } 
     }); 
     } 
    } 
    }, 
    filter: "div:not(.subgroup)" 
}); 

. 그런 다음 기존 선택을 유지하면서 선택 항목을 클릭하고 클릭 할 수 있기를 원했기 때문에 클릭 한 새로운 클래스를 추가합니다. 모든 어린이들이 선택되었거나 선택되지 않은 경우 선택 취소하고 첫 번째 수준에서 모든 어린이를 켜고 끄는 경우 첫 번째 수준을 선택하기를 원했습니다.

Answer 2

자녀가 부모가 아닌 ul으로 선택되도록하고 싶습니다. 현재 예제를 사용하여 다음을 수행하십시오

$(function() { 
    $('ul').children('li').children('ul').selectable(); 
}); 

DEMO : http://jsfiddle.net/dirtyd77/FHBMq/1/ 내가 정렬되지 않은 목록을 가지고 올 수있는 유일한 해결책은 같은 보조 정렬되지 않은 목록 이전 목록 항목을 닫아 잘못된 마크 업이었다