jQuery 중첩 div 숨기기

Question

나는 3 단계의 div가 있습니다. 내가 작업 div에서 버튼을 선택할 때 몇 가지 옵션 (중요 : 마지막으로 표시된 옵션 (및 카테고리) 숨기기)이 표시되어야합니다. 일부 옵션 버튼을 클릭하면 카테고리가 표시됩니다. ?이 온 클릭 속성 모든 변형을 작성하는 것보다 훨씬 깨끗 볼 수 있도록하는 방법 (이 내가 여기에 훨씬 더 큰 예를 단지 예이다 -. 각 옵션에 대한 많은 옵션, 많은 카테고리를)

<div id="action"> 
    <p:commandButton onclick="$('#option1').show(); "$('#option2').hide();"/> 
    <p:commandButton onclick="$('#option1').hide(); "$('#option2').show();"/> 
</div> 

<div id="option1" style="display:none"> 
    <p:commandButton onclick="...?"/> 
    <p:commandButton onclick="...?"/> 
</div> 

<div id="option2" style="display:none"> 
    <p:commandButton onclick="...?"/> 
    <p:commandButton onclick="...?"/> 
</div> 

<div id="option1category1" style="display:none"> 
    <p:commandButton /> 
</div> 
<div id="option1category2" style="display:none"> 
    <p:commandButton /> 
</div> 
<div id="option2category1" style="display:none"> 
    <p:commandButton /> 
</div> 

Answer 1

있습니다 마크 업에 많은 오류가 있습니다. button 태그는 img 태그와 동일하게 사용되지 않습니다. 버튼 태그에는 시작 및 닫기 요소가 있습니다.

또한 div는 <div> 대신 </div> 태그로 마감해야합니다.

나는 아마도 당신이 찾고있는 몇 가지 기본적인 기능을 스케치했다.

$('#button1').click(function(){  
    $('div[id^="option"]').hide(); 
    $('#option1').show(); 
}); 

$('#button2').click(function(){ 
    $('div[id^="option"]').hide(); 
    $('#option2').show(); 
}); 

이 코드는 옵션으로 ID를 시작하는 모든 div를 숨긴 다음 그 중 하나를 표시합니다.

전체 마크 업을 확인하려면 바이올린을 확인하십시오.

http://jsfiddle.net/ef4ux/