다단계 클릭 서브 메뉴

Question

3 단계의 하위 메뉴가 필요합니다.

처음에는 주요 지점 (men1, men2) 만 표시되어야합니다. 그런 다음 "men1"을 클릭하면 "men1.1 및 men 1.2"가 표시됩니다. "men1.2" "men1.2.1, men1.2.2 및 men 1.2.3"을 클릭하면 나머지는 보이지 않아야합니다.

"men2"를 클릭하면 다른 모든 하위 항목은 사라지고 "men2"만 사라집니다. 1 및 men2.2 "가 표시됩니다.

내가 무슨 뜻인지 알기를 바랍니다. 결국 모든 것은 광석을 확장하는 것과 같이 움직여야합니다!

이 내 진행입니다 지금까지

$(document).ready(function(){ 
 
    $('#navi ul').click(function(){ 
 
    $('#navi').find('.sub1').css('visibility', 'hidden'); 
 
    $(this).find('.sub1').css('visibility', 'visible'); 
 
    }); 
 
    $('#navi ul ul').click(function(){ 
 
    $('#navi').find('.sub2').css('visibility', 'hidden'); 
 
    $(this).find('.sub2').css('visibility', 'visible'); 
 
    }); 
 
});

.main { 
 
font-size: 2em; 
 
padding:1em 0 0 0; 
 
} 
 

 
.sub1 { 
 
    font-size:0.7em; 
 
    padding:0 0 0 1em; 
 
    visibility: hidden; 
 
} 
 

 
.sub2 { 
 
    font-size:0.7em; 
 
    padding:0.2em 0 1em 2em; 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="navi"> 
 
    <ul class="main"> 
 
    <li><a >men1</a> 
 
     <ul class="sub1"> 
 
     <li><a >men1.1</a> 
 
      <ul class="sub2"> 
 
      <li><a >men1.1.1</a></li> 
 
      <li><a >men1.1.2</a></li> 
 
      <li><a >men1.1.3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a >men1.2</a> 
 
      <ul class="sub2"> 
 
      <li><a >men1.2.1</a></li> 
 
      <li><a >men1.2.2</a></li> 
 
      <li><a >men1.2.3</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul class="main"> 
 
    <li><a >men2</a> 
 
     <ul class="sub1"> 
 
     <li><a >men2.1</a> 
 
      <ul class="sub2"> 
 
      <li><a >men2.1.1</a></li> 
 
      <li><a >men2.1.2</a></li> 
 
      <li><a >men2.1.3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a >men2.2</a> 
 
      <ul class="sub2"> 
 
      <li><a >men2.2.1</a></li> 
 
      <li><a >men2.2.2</a></li> 
 
      <li><a >m2n2.2.3</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

당신은 내가 배우고 때문에 나는 JQuery와 솔루션을 선호하는 레벨 1 클릭 할 때 레벨 3이 사라지고되지 볼 수 있습니다 그것은 쉽게 될 것으로 솔루션을 이해하고 있습니다.

희망을 보내주세요. 미리 감사드립니다.

Answer 1

당신은 부모 요소에 대해 트리거에서 클릭을 방지하기 위해 세 번째 수준 요소에 전파를 중지해야합니다 :

.sub1 { 
    display: none; 
} 
.sub2 { 
    display: none; 
} 

공지 CSS에 대한 변경 페이지에서 빈 공간을 제거 할 수 있습니다.

$(document).ready(function() { 
    $('#navi > ul > li').click(function() { 
     $('#navi .sub1').not($(this).find('.sub1')).hide(); 
     $(this).find('.sub1').toggle(); 
    }); 
    $('#navi > ul ul > li').click(function (e) { 
     e.stopPropagation(); 
     $('#navi .sub2').not($(this).find('.sub2')).hide(); 
     $(this).find('.sub2').toggle(); 
    }); 
}); 

Demo

은 또한 슬라이드 효과를 언급했다. 여기에 a demo이 있습니다.