2

我以前从未使用过 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); });   
}

基本上，我正在做的是获取第一级lis，然后为它们添加一个hover侦听器，告诉他们为他们的孩子制作动画ul（这是实际的子菜单）。
相反，我得到的是当我指向“产品”时，它自己的子菜单不显示，而是弹出“联系我们”的子菜单！当我指向“联系我们”时，它的子菜单会按预期弹出。注意：棕色ul设置为显示：无
我感谢任何帮助。在此先感谢
PS：我正在使用 jQuery 1.7.1（如果重要的话）

4

2 回答 2

2

对于您要实现的目标，它看起来相当复杂。我会做这样的事情。

$(".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-19T14:18:00.667 回答
1

我看到您在代码中尝试做什么，但我认为您应该首先从良好的 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-19T14:23:44.867 回答