模板的動畫下拉菜單

我從來沒有使用過jQuery，我試圖做一些非常簡單的事情，但它一直讓我發瘋。我爲CMS設計了一個模板，現在我想讓它的菜單變成動畫。下面的圖片說明了菜單的結構（這顯然是由CMS生成）
The menu structure 模板的動畫下拉菜單

下面的代碼是什麼，我認爲應該工作，但它並不：

var menuItem = jQuery(".menu:first>li"); 
var subMenu; 
for(var i=0; i<menuItem.length;i++) 
{ 
    var li = jQuery(menuItem[i]); 
    subMenu = li.children("ul"); 
    if (subMenu.length) 
     li.hover(function(){ li.children("ul").slideToggle(250); }); 
}

基本上，我正在做的是獲得第一級li s，然後添加一個hover聽衆給他們，告訴他們爲他們的子女ul（這是實際的子菜單）設置動畫。
我得到的是當我指向「產品」時，它自己的子菜單沒有顯示，相反，彈出「聯繫我們」的子菜單！當我指向「聯繫我們」時，它的子菜單會彈出，就像它應該的那樣。 注意：棕色ul設置爲顯示：無
我欣賞任何幫助。預先感謝
PS：我使用jQuery 1.7.1（如果它的事項）

來源

2012-07-19 M2X

此外，如果任何人都可以建議一種替代方式，我會非常感激！ – M2X 2012-07-19 14:12:59

它看起來對你的努力來實現非常複雜。我會做這樣的事情。

$(".menu > li").hover(

    //When mouse is over the menu button 
    function() { 
    $(this).children("ul").slideDown(250); 
    }, 

    //When mouse leaves the menu/menu button 
    function() { 
    $(this).children("ul").slideUp(250); 
    } 
);

來源

2012-07-19 14:18:00 Undefined

該死！我剛剛找到了我自己！感謝您的回答。真的很感激它。爲什麼我的代碼無法工作？！ – M2X 2012-07-19 14:24:22

我在代碼中看到了你想要做的事情，但我認爲你應該先從良好的jQuery實踐開始。這真的不難，你會看到。它會讓你的生活變得更容易。

首先，我不確定一個循環是你想要的。 jQuery提供了一個選擇器（可以用$作爲快捷鍵）來選擇類，它非常強大。建立你的菜單是這樣的（排序）：

<ul id="menu"> 
    <li class="menu-item">Home 
     <ul> 
     <li></li> 
     <li></li> 
     </ul> 
    </li> 
    <li class="menu-item">Products 
     <ul> 
     <li></li> 
     <li></li> 
     </ul> 
    </li> 
    <li class="menu-item">Contact us 
     <ul> 
     <li></li> 
     <li></li> 
     </ul> 
    </li> 
</ul>

然後你就可以用

$('.menu-item')

，並在其懸停功能選擇菜單項，選擇下拉與

$(this).childen('ul')

然後基本上玩得開心！

來源

2012-07-19 14:23:44 user1537927

模板的動畫下拉菜單

回答

相關問題