Jquery inner UL FadeIn/FadeOut

Question

간단한 작업을 수행하려고합니다. 중첩 된 UL이있는 2 단계 메뉴가 있습니다. 내부 UL은 display : none으로 설정되므로 기본 범주 만 표시됩니다. 기본 범주에서 기본 onclick 동작을 방지하고 해당 내부 UL을 제쳐두어 페이드하고 싶습니다.

<nav id="type-navigation"> 
    <ul id="nav_categories" class="subs"> 
     <li><a href="#">Category 1</a> 
       <ul> 
       <li><a href="#">Link1</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link3</a></li> 
       </ul> 
     </li> 
     <li><a href="#">Category 2</a> 
       <ul> 
       <li><a href="#">Link1</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link3</a></li> 
       </ul> 
     </li> 
</ul> 
</nav> 

I이 사용하는 jQuery를하고 싶으면 :

내 HTML이입니다. 첫 번째 카테고리를 클릭하면 자녀 UL을 FadeIn 옆에 표시해야합니다. 다른 카테고리를 클릭하면 이전에 표시된 UL은 FadeOut이고 다른 카테고리 UL은 FadeIn이어야합니다.

이 내 jQuery를하고는 예상대로 작동하지 않습니다 :

$("ul li a").toggle(function() { 
        $(this).children("ul").fadeIn("slow"); 
        }, 
        function() { 
       $(this).children("ul").fadeOut("slow"); 
       }); 

Answer 1

를 옆 <a>로 <ul>가 CSS를 display:none에 숨겨져 있다고 가정 :

$(".subs > li > a").click(function() { 
    $(this).parents('.subs').find('ul').hide(); 
    if($(this).next("ul").is(":visible")) { 
      $(this).next("ul").fadeOut("slow"); 
    } else { 
     $(this).next("ul").fadeIn("slow"); 
    } 
    return false; 
}); 

Answer 2

이 this example를 사용해보십시오. 예로부터

CSS 예에서

nav > ul > li > ul { 
display:none; 
}​ 

jQuery를 :이 도움이

$('ul#nav_categories > li > a').click(function(e) { 
    e.preventDefault(); 
    theClickedLi = $(this); 
    $('#nav_categories').find('ul').fadeOut(); 
    theClickedLi.parent('li').find('ul').fadeIn(); 
}); 

희망.