도움말 타겟팅 요소

Question

나는 다음과 같은 코드가 있습니다 그것은 나를 각각 "보조"요소는 개별적으로 클릭 할 때 클래스를 전환하거나 모든 보조에 대해 변경할 수 있도록 현재

<div class="main"></div> 

<div> 
    <div class="secondary"></div> 
    <table class="tbl"></table> 
</div> 

<div> 
    <div class="secondary"></div> 
    <table class="tbl"></table> 
</div> 

:

$(".main").click(function() { 
    $(this).toggleClass("classA").toggleClass("classB"); 
    $(".secondary").toggleClass("classC").toggleClass("classD"); 
)); 

$(".secondary").click(function() { 
    $(".secondary").toggleClass("classC").toggleClass("classD"); 
)); 

그리고 HTML을 "main"을 클릭했을 때. 해당 "보조"또는 "기본"을 클릭하면 해당 div에 표 숨기기를 추가해야합니다. 타겟팅하는 데 어려움이 있습니다. 시도했지만 실패하는 것은 :

$(this).closest(".tbl").toggle(); 

Answer 1

이 시도 :

$(".secondary").click(function() { 
    $(".secondary").toggleClass("classC").toggleClass("classD"); 
    $(this).parent().children(".tbl").toggle(); 
//or this: $(this).next(".tbl").toggle(); 
)); 

Answer 2

내가 정확히 요구하는지 이해하고있어 잘 모르겠지만,이 데모를 살펴 있습니다 http://jsfiddle.net/Ender/DQcSE/

을 여기에 해당 소스가 있습니다 :

에 대한 토글을 총괄적으로 처리하는 기능을 설정했습니다.. .main 클릭 핸들러에서 기본 클래스가 토글되고 .secondary에서 secondaryToggle() 함수가 호출됩니다. 클릭 핸들러 .secondary에서 secondaryToggle()은 클릭 된 요소에서만 호출됩니다.

secondaryToggle()은 해당 요소의 클래스를 토글하고 다음 요소를 선택하고 (클래스가 .tbl 인 경우에만) 해당 가시성을 토글합니다.

각 클래스에 대해 .toggleClass()을 호출 할 필요가 없습니다. .addClass() 및 .removeClass()과 매우 비슷하게 클래스를 공백으로 구분하여 전달할 수 있습니다.