www.latimes.com처럼 작동하는 jQuery 메뉴를 만드는 방법은 무엇입니까?

Question

이 웹 사이트의 메뉴처럼 작동하는 메뉴를 만들려고합니다 : http://www.latimes.com/. 하지만 그것은 Los Angeles Times 에서처럼 잘 작동하지 않습니다.

어떻게 해결할 수 있습니까? 다른 방법이 있습니까?

다음은 항목을 클릭하여 코드보기/숨기기 하위 메뉴입니다.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
     var $j = jQuery.noConflict(); 
     $j(document).ready(function() { 
     }); 
     function Reveal(a){ 
      var ul = a.parentNode.getElementsByTagName("UL").item(0); 
      $j(ul).show({height: 'toggle' ,opacity: 'toggle'}, 1); 
     } 
</script> 

나는 이상 마우스의 Reveal 함수를 호출 :

<li><a href="#" onmousover="Reveal(this);">testimonials</a> 

Answer 1

이렇게 좋은 작동하지 않거나 전혀 작동하지 않는 이유는 무엇입니까? show 기능을 잘못 사용하고 있습니다. 그리고 저 toggle 매개 변수는 또한 불분명하다.

나는 LA 타임즈 메뉴의 모든 애니메이션을 보지 못했지만, 그 구문 (따옴표없이 토글 변수를 정의하고이를 사용은) show에 대한보다 jQuery를 animate 기능에 더 적합 할 것이다. 그것은 .animate(properties, [duration,] [easing,] [complete])

내가 같은 것을 할 것, 어떻게 든 당신이 그것을 달성하기 위해 시도하는 방법을 다음 http://api.jquery.com/show/ 및 http://api.jquery.com/animate/

를 참조입니다 (테스트하지!)를 HTML로

<script type="text/javascript"> 
    var $j = jQuery.noConflict(); 
    $j(document).ready(function() { 
     $j('#mainNavi > li').hover(function() { 
       $j(this).children('ul').show(); 
     }, function() { 
       $j('#mainNavi > li > ul').hide(); 
     }); 
    }); 
</script> 

, 당신은 같은 것을 할 것이다 :

<ul id="mainNavi"> 
    <li> 
     <a href="">link1</a> 
     <ul style="display: none"> 
       <li>submenu item1</li> 
       <li>submenu item2</li> 
     </ul> 
    </li> 
    <li> 
     <a href="">link2</a> 
     <ul style="display: none"> 
       <li>submenu item1</li> 
       <li>submenu item2</li> 
     </ul> 
    </li> 
</ul>