하나의 상위 메뉴 항목의 하위 항목 표시 및 다른 하위 메뉴 숨기기/슬라이드 업

Question

메뉴 토글과 관련된 작은 문제가 있습니다. 아래는이 문제에 대한 시각적 인 참고 자료입니다. 현재 상단 링크의 하위 항목이 표시되는 것을 볼 수 있습니다. 주어진 시간에 오직 하나의 상위 링크 만 볼 수있는 하위 항목이 필요합니다. 하나의 상단 링크를 클릭하면 다른 항목보다 숨김/슬라이드 업해야합니다.

---

JS

---

jQuery(document).ready(function(){ 
    jQuery('.menu-item').click(function(){ 
    var position = jQuery(this).position(); 
    jQuery('.sub-menu', this).slideDown('slow'); 
    }); 
}); 

HTML - 메뉴의 샘플 구조.

<ul class="menu"> 
<li class="menu-item" id="544" ><a href="#">Top Link One</a> 
    <ul class="sub-menu"> 
     <li class="menu-item"><a href="#">link one</a></li> 
     <li class="menu-item"><a href="#">link two</a></li> 
     <li class="menu-item"><a href="#">link three</a></li> 
</ul> 
</li> 


<li class="menu-item" id="545"><a href="#">Top Link Two</a> 
<ul class="sub-menu"> 
    <li class="menu-item"><a href="#">link four</a></li> 
    <li class="menu-item"><a href="#">link five</a></li> 
    <li class="menu-item"><a href="#">link six</a></li> 
</ul> 
</li> 

나는 여기에 비슷한 문제를 많이 시도했지만 자신의 경우에 매우 특정한 것처럼 보입니다. 나는 지금 막 JS를 배우고 있습니다. 그래서 저를 도와주세요. 감사.

jQuery(document).ready(function(){ 
    jQuery('.menu-item').click(function(){ 
     jQuery('.sub-menu').not(jQuery('.sub-menu', this).slideDown('slow')).slideUp('slow'); 
    }); 
}); 

Answer 1

에 클릭 핸들러를 수정 먼저 모든 sub-menu을 숨길 다음 sub-menu을 만들 수 있습니다 클릭하면 보이는 menu-item입니다.

jQuery(document).ready(function(){ 
jQuery('.menu-item').click(function(){ 
// hide all submenu first 
jQuery('.menu-item').find('.sub-menu').slideUp('slow'); 
var position = jQuery(this).position(); 
// show clicked submenu 
jQuery('.sub-menu', this).slideDown('slow'); 
}); 
}); 

Answer 2

시도 :

Answer 3

이보십시오, 당신의 문제를 해결하기 위해 효과적으로 여기 .not() 기능을 사용

jQuery(document).ready(function(){ 
jQuery('.menu-item').click(function(){ 
jQuery('.menu-item .sub-menu').slideUp('slow'); //slideup all submenus first 
var position = jQuery(this).position(); 
jQuery('.sub-menu', this).slideDown('slow'); 
}); 
});