模板的动画下拉菜单

Question

我之前从未使用过jQuery而且我正在尝试做一些非常简单的事情，但这让我发疯了。 我为CMS设计了一个模板，现在我想让它的菜单动画化。 下图说明了菜单的结构（显然由CMS生成）

以下代码是我认为应该起作用的，但它没有：

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，然后向他们添加一个hover听众，告诉他们为他们的孩子设置动画ul（这是实际的子菜单） 我得到的是当我指向“产品”时，它自己的子菜单没有显示，相反，弹出“联系我们”的子菜单！当我指向“联系我们”时，它的子菜单会弹出，就像它应该的那样。 注意：棕色ul设置为显示：无
我感谢任何帮助。 提前谢谢你 PS：我正在使用jQuery 1.7.1（如果重要的话）

Answer 1

您尝试实现的目标看起来相当复杂。我会做这样的事情。

$(".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);
  }
);

Answer 2

我看到你在代码中尝试做什么，但我认为你应该首先从良好的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')

然后基本上玩得开心！