jQuery로 wp_nav_menu 애니메이션하기

글자 그대로 내 드롭 다운 메뉴를 jQuery로 애니메이트하는 방법을 알아 내려고 노력했습니다. 나는 wp_nav_menu를 간단한 스크립트와 함께 사용하고 있는데 왜 작동하지 않을지 잘 모르겠습니다.jQuery로 wp_nav_menu 애니메이션하기

다음은 탐색 소스입니다 :

<nav id="topNav"> 
    <div id="navwrap" class="menu-main-container"> 
    <ul id="menu-main" class="dropdown"> 
     <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://www.mysite.com/page1-2/">Page1</a> 
     <ul class="sub-menu"> 
      <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://www.mysite.com/sub-page1-1/">Sub-Page1-1</a></li> 
      <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://www.mysite.com/sub-page1-2/">Sub-Page1-2</a></li> 
     </ul> 
     </li> 
     <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://www.mysite.com/page2-2/">Page2</a> 
     <ul class="sub-menu"> 
      <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://www.mysite.com/sub-page2-1/">Sub-Page2-1</a></li> 
      <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://www.mysite.com/sub-page2-2/">Sub-Page2-2</a></li> 
     </ul> 
     </li> 
     <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://www.mysite.com/page3-2/">Page3</a> 
     <ul class="sub-menu"> 
      <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://www.mysite.com/sub-page3-1/">Sub-Page3-1</a></li> 
      <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://www.mysite.com/sup-page3-2/">Sup-Page3-2</a></li> 
     </ul> 
     </li> 
     <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://www.mysite.com/page4-2/">Page4</a> 
     <ul class="sub-menu"> 
      <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a href="http://www.mysite.com/sub-page4-1/">Sub-Page4-1</a></li> 
      <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="http://www.mysite.com/sub-page4-2/">Sub-Page4-2</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</nav>

그리고 여기에 내가 위아래 숨겨진 적 UL 애니메이션을 쓴 스크립트입니다

<script type="text/javascript"> 
jQuery(function() { 
    jQuery("#navwrap ul.dropdown li").hover(function() { 
     jQuery(this).find('ul.sub-menu') 
      .stop(true, true).delay(50).animate({ "height": "show", "opacity": "show" }, 200); 
    }, function(){ 
     jQuery(this).find('ul.sub-menu') 
      .stop(true, true).delay(50).animate({ "height": "hide", "opacity": "hide" }, 200); 
    }); 

}); 
</script>

어떤 제안이 작동하지 않습니다 이유에가? 나는 몇 시간 동안이 일을 해왔다.

출처

2012-05-18 dcd0181

코드로 jsfiddle example을 만들었으므로 잘 작동합니다. * 참고 : 나는 CSS를 추가하지 않았습니다.

그래서 코드에서 다음과 같은 문제를 확인하십시오

는 jQuery를 올바르게 연결했다.
방화 광 또는 크롬 검사 요소에 오류가 있는지 확인하십시오.
CSS에서 스크립트를 덮어 쓰는 규칙을 확인하십시오.

그래도 문제가있는 경우 사이트 링크를 제공하십시오.

건배 !!!

출처

2012-05-18 03:34:29 Libin

내 드롭 다운을 작동 시키려면 페이지로드시 하위 메뉴를 숨기고 표시해야했습니다.

$(".sub-menu").hide(); // hide the submenu on page load 
$(".current_page_item .sub-menu").show();

출처

2012-09-14 21:57:26 Sizzles27

jQuery로 wp_nav_menu 애니메이션하기

답변

관련 문제