Joomla 용 jQuery로 하위 메뉴 만들기

Question

새로운 문제가 있습니다. joomla 웹 사이트에 jquery로 하위 메뉴를 만들고 싶습니다. 메뉴는 다음과 같습니다.

<ul id="submenu"> 
    <li><a href="#">Link</a></li> 
    <li class="parent"> 
     <a href="#">Submenu 1</a> 
     <ul> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </li> 
    <li class="parent"> 
     <a href="#">Submenu 2</a> 
     <ul> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </li> 
     <li class="parent"> 
     <a href="#">Submenu 3</a> 
     <ul> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
</ul> 

모든 요소에 하위 요소가있는 것은 아닙니다. 어떻게하면됩니까? 나는이처럼 시도했다 :

// hide all elements onload 
$("#submenu > li.parent > ul").hide(); 

$("#submenu li.parent").hover(function() { 
    $(this).find("ul").slideDown("slow"); 
}); 

하지만 사용자가 마우스로 메뉴에서 멀리 이동하면 내가 하위 메뉴를 닫을 수 있습니다 방법을 모르겠어요. 그리고 서브 메뉴를 보여주기 전에 다른 오픈 엔드 메뉴를 닫고 싶습니다. 아무도 도와 줄 수 있습니까?

감사

Answer 1

당신은 mouseenter/mouseleave

$("#submenu li.parent").mouseenter(function() { 
    $(this).find("ul").slideDown("slow"); 
}).mouseleave(function() { 
    $(this).find("ul").slideUp("Slow"); 
});​ 

사용할 수 있습니다하지만 더 순수 CSS 솔루션을 가고 싶어.

http://jsfiddle.net/QEWvm/

CSS3 샘플 솔루션 : http://jsfiddle.net/qzP7s/

Answer 2

JQuery와 솔루션을 가고, 나는 적어도 .stop().slideUp() 전에이 애니메이션 대기열을 일으킬 수있는 마우스의 움직임을 고려하여 추가 추천합니다. 그래서 여기 http://jsfiddle.net/QEWvm/4/

문제

$("#submenu li.parent").mouseenter(function() { 
    $(this).find("ul").slideDown("slow"); 
}).mouseleave(function() { 
    $(this).find("ul").stop().slideUp("Slow"); 
});​ 

바이올린이 방법 결국이 코드는 비록 화면 판독기는 무시 display:none하는 .hide() 세트로, 액세스 할 수없는 것입니다.

더 나은 솔루션 (당신이 애니메이션없이 살, 또는 그들을 알아 내기 위해 CSS3를 사용할 수있는 경우)이

#submenu > li.parent > ul { position: absolute; left: -9999px; } 

#submenu li.parent:hover ul { 
    left: 90px;   
} 

이 바이올린 같은 유사한 무언가를 달성하기 위해 위치 및 pseudoclasses를 사용하는 것 http://jsfiddle.net/QEWvm/5/ 작동하는 것으로 나타납니다.