내 자신의 jquery 아코디언

Question

안녕하세요 여러분, 다음 메뉴 구조를 만들었습니다.

<div id="menu">
<ul>
<li><a href="#">Main Item1</a></li>
<li><a href="#">Main Item2</a></li>
<li><a href="#">Main Item3</a>
    <ul>
    <li><a href="#">SubItem for MainItem3</a></li>
    <li><a href="#">2ndSub for MainItem3</a></li>
    </ul>
</li>
<li><a href="#">Main Item4</a>
    <ul>
    <li><a href="#">SubItem for MainItem4</a></li>
    <li><a href="#">2ndSub for MainItem4</a></li>
    </ul>
</li>
</ul>
</div>

이것이 제 메뉴 구조입니다. 이제 jQuery 최신을 사용하여 슬라이드 업/슬라이드 타운 효과를 만들고 싶습니다.

나는 이런 식으로한다 :

$(document).ready(function(){
    $('#menu ul li:has(ul)').mouseenter(function(){         
                $('#menu ul li ul').slideDown('slow');                              
    }).mouseleave(function(){
        $('#menu ul li ul').slideUp('slow');
    });
});

처음에는 마우스 오버와 마우스 아웃을 시도했지만 그 기능을 사용했을 때 마우스 오버가 작동했고 서브로 가고 싶을 때 메뉴는 미끄러졌지만 마우스 아웃 이벤트는 Occours가 있습니다. 이제는 효과가 있었지만 메인 항목 3에서 예를 들어, 메인 항목 4의 서브도 마우스 아웃에서 열리고 닫습니다.!?! 예를 들어 메인 항목의 메뉴 항목 만 말하는 방법 3 Oder Main Item 4 ???

내가 무슨 뜻인지 이해 하시길 바랍니다?

감사

Answer 1

$(function(){
    $('#menu ul li:has(ul)').hover(function(){                 
            $(this).find('ul').slideDown('slow');                                                          
    }, function(){
            $(this).find('ul').slideUp('slow');
    });
});