用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>

這裏是我寫的上下動畫隱藏的上行線路的腳本：

<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與您的代碼，它工作正常。 * Note：我沒有添加任何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

回答

相關問題