模板的动画下拉菜单

我从来没有使用过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

模板的动画下拉菜单

回答

相关问题