css only megamenu를 jquery 기반으로 변환하는 방법

Question

전적으로 CSS 기반의 megamenu를 사용하고 있습니다. 단점은 애니메이션이 없다는 것입니다. 갑자기 드롭 다운이 모두 표시됩니다. 그래서 그것을 jquery 기반 토글로 변환 할 생각입니다. 다음은 현재 코드입니다. 어떻게 그것을 jQuery 기반으로 변환 할 수 있습니까?

.dropdown-1column, 
.dropdown-2columns, 
.dropdown-3columns, 
.dropdown-4columns, 
.dropdown-5columns { 
    margin:-1px auto 0 -285px; 
    float:left; 
    position:absolute; 
    text-align:left; 
    padding:10px 5px 10px 5px; 
    border:1px solid #dedede; 
    background:#fff; 
    z-index:999; 
    display:none;  
} 


.menu li:hover .dropdown-1column, 
.menu li:hover .dropdown-2columns, 
.menu li:hover .dropdown-3columns, 
.menu li:hover .dropdown-4columns, 
.menu li:hover .dropdown-5columns { 
    display:block; 
} 

여기에 코드를입니다 http://jsfiddle.net/gsTNS/

Answer 1

이 꽤 많이 내 생각은 당신이 무엇을 찾고 있는지 않습니다. 아마 정제 될 수 있습니다 :

http://jsfiddle.net/gsTNS/5/

기본적으로 나는 "이 - 드롭 다운을"드롭 다운이있는 각 LI에 클래스를 추가했고 나는 각 드롭 다운 DIV에 "드롭 다운"클래스를 추가했습니다. 당신이 브라우저 호환성에 많은 제한을 모두없는 경우

가

jQuery("div#menu ul.menu li.has-dropdown").hover(
function() { 
    $(this).find("div.dropdown").slideToggle(); 
}, 
function() { 
    $(this).find("div.dropdown").slideToggle(); 
} 
);