jQuery 토글 선택 옵션 메커니즘에서 선택

Question

선택 옵션을 통해 토글을 시도하고 있습니다. 나는 두 개 이상의 토글하는 데 어려움을 겪고있다. 내 목표는 선택 옵션을 통해 4까지 전환 할 수있게하는 것입니다. 예를 들어 카테고리 및 하위 카테고리. 여기 내 예가 jsfiddle입니다.

<script type="text/javascript"> 
    var op = $("#tables option[value='options']:selected"); 
    var os = $("#tables option[value='Example2']:selected"); 
    if (op.length) 
     $("#something").show(); 
    else 
     $("#something").hide(); 
    if (op == ("#something").show()) 
      $("#something2").show(); 
    else 
     $("#something2").hide(); 

}​ 
</script> 

Answer 1

이 디자인 패턴을 찾고 계십니까?

if your object is not selected 
    if your parent is selected 
     you are also selected 
    else 
     you are selected 
else 
    you are now unselected 

이 논리는 임의의 재귀 깊이에서 작동합니다.

편집 : 각 메뉴가 ul이라고 가정합니다. 선택기를 조정해야합니다. 이것은이를 수행하는 한 가지 방법 일뿐입니다. 가시성에 문제가 있거나 Ui 리플 로우 문제가있는 경우에는 최선의 방법이 아닙니다.

clickyclicky = function(event) { 
    var $target = $(event.currentTarget); 
    if (!$target.hasClass("selected")) { 
     // hide the old target and its parents 
     var $oldTarget = $('.selected'); 
     $oldTarget.removeClass("selected").hide().parents('ul').hide(); 
     // show the new target and its parents 
     $target.show().addClass("selected").parents('ul').show(); 
    } else { 
     // hide the target 
     $target.removeClass("selected").hide(); 
     // move the selected token to the parent. 
     $parent = $target.parent().parent(); // assuming an ul/li tree pattern. 
     if ($parent.is('ul')) { 
      $parent.addClass("selected"); 
     } 
    } 
} 

이 코드는 테스트하지 않았습니다. 단지 일반적인 참조 일뿐입니다.

편집 : http://jsfiddle.net/uA7XD/76/