在jquery中定位元素 - 没有滑动上/下

jquery的新手。希望显示/隐藏水平菜单栏项目。我尝试了几次迭代没有成功。在jquery中定位元素 - 没有滑动上/下

CSS正在工作和样式化，并且javascript在onload事件中将li和a标记类设置为“活动”。我错过了什么？我总结错误是在jQuery中，但它不能简单得多。解释有帮助。我将不胜感激使用现有的HTML的建议。

div id = menu的主要目的是启用对中条。

我的脚本

编辑1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

$(document).ready(function() { 
    $('#nav li').hover(function() { 
     //show its submenu 
     $('ul', this).slideDown(100); 
    }, function() { 
     //hide its submenu 
     $('ul', this).slideUp(100); 
    }); 
});

我的HTML

<div id="menu"> 
    <ul id="nav"> 
     <li id="lhome" class=""> 
      <a href="index.php" id="ahome" class="">Home</a> 
     </li> 
     <li id="lprod" class=""> 
      <a href="products.php" id="aprod" class="">Products</a> 
      <ul> 
       <li><a href="#">Link one</a></li> 
       <li><a href="#">Link two</a></li> 
       <li><a href="#">Link three</a></li> 
       <li><a href="#">Link four</a></li> 
      </ul> 
     </li> 
     <li id="ltest" class=""> 
      <a href="testimonial.php" id="atest" class="">Testimonials</a> 
      <ul> 
       <li><a href="#">Link one</a></li> 
       <li><a href="#">Link two</a></li> 
       <li><a href="#">Link three</a></li> 
       <li><a href="#">Link four</a></li> 
      </ul> 
     </li> 
     <li id="lcont" class=""> 
      <a href="contact.php" id="acont" class="">Contact&nbsp;Us</a> 
     </li> 
    </ul> 
</div>

来源

2012-08-05 David

看起来没问题。任何控制台错误？你能设置一个JS小提琴来说明问题吗？ – Utkanos 2012-08-05 21:56:38

你可以发布你所有的HTML吗？你确定你正在加载jQuery库吗？ – Blender 2012-08-05 21:58:14

@Ukkanos没有控制台错误。我不使用JS小提琴（还）。将下面的CSS插入到Francois的演示中，以查看 – David 2012-08-05 22:13:12

您现有的代码似乎工作正常，看DEMO

编辑

根据您的反馈，我做了一些更多的研究，发现您的CSS正在干扰动画。

如果你看看上面链接的没有样式的原始演示，你会看到滑动向下/向上滑动100毫秒。

如果你看看你的DEMO与CSS你看到的菜单刚刚出现。

经过一些试验和错误，我确定了导致这种情况的CSS。如果您从CSS中删除以下部分，则子菜单的动画将按预期再次运行。

/* Make the sub menus appear on hover */ 
#menu ul li:hover ul, 
#menu ul li.hover ul { /* This line is required for IE 6 and below */ 
    display:block; /* Show the sub menus */ 
}

上面的CSS覆盖了滑动向下/向上方法的动画，而只是将子菜单显示为一个块。如果你离开IE6修复，但你必须删除CSS的#menu ul li:hover ul它仍然有效：

/* Make the sub menus appear on hover */ 
#menu ul li.hover ul { /* This line is required for IE 6 and below */ 
    display:block; /* Show the sub menus */ 
}

我申请更改小提琴，现在正在工作。
请参阅DEMO

来源

2012-08-05 22:03:38 Nope

感谢您的帮助弗朗索瓦。我插入我的CSS，它的行为与我经历的一样。有没有办法将CSS保存到该演示中？ – David 2012-08-05 22:18:20

我想我发现'更新'。你能在那里看到吗？ – David 2012-08-05 22:19:14

@DavidC：当你点击更新URL更新后，你可以发布。我想我发现它虽然：http://jsfiddle.net/urhDr/8/虽然小提琴看起来不错。我在Chrome中使用它。菜单在悬停时打开。这不是你所期望的吗？ – Nope 2012-08-05 22:20:06

在jquery中定位元素 - 没有滑动上/下

回答

相关问题