JQuery制作二级滑动菜单

发表于 2009年6月19日由 kily

最近在做这个东西的时候遇到了一点问题最后解决了现在发上来给大家看看.问题是这样的：
在JavaScript中mouseover事件有个bug.看下图：

子菜单”sub-menu”本来是不显示的，在JavaScript中调用”menu”div的mouseover方法时”sub-menu”会显示出来，但当调用”menu”div的mouseout方法让它隐藏时鼠标的响应范围只是menu区域，这时当我们将鼠标移动到sub-menu区域时菜单会收缩回去这是我们不想看见的效果.
解决办法：
很简单－引入JQuery后，它有一个专门模拟a标签hover的方法”hover()”

hover(over,out)
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

查看最终效果

《JQuery制作二级滑动菜单》上有 14 条评论

青色在 2009年7月6日10:31 说：

还行，但有待改进。。。

回复 ↓
- kily 在 2009年7月6日23:21 说：
  
  @青色 JQuery我还是初学，青色多多指教啊！
  
  回复 ↓
安在 2009年6月21日18:58 说：

以后学JS去…

回复 ↓
- kily 在 2009年6月21日19:21 说：
  
  那你的医学啥办?
  
  回复 ↓
踏雪残情在 2009年6月21日17:10 说：

jquery确实使任务更简单,学习了

回复 ↓
- kily 在 2009年6月21日17:22 说：
  
  呵呵。那是，JQuery流行是有它的原因的^!^
  
  回复 ↓
rollom 在 2009年6月20日23:34 说：

学习了，什么时候帮我设计一下网站啊，呵呵。

回复 ↓
- kily 在 2009年6月20日23:48 说：
  
  哈哈。设计道不敢说，写代码还行…
  
  回复 ↓
Isaac 在 2009年6月20日13:30 说：

有点深奥，我看不懂

回复 ↓
- kily 在 2009年6月20日20:53 说：
  
  呵呵。。其实挺简单的。等遇到了就明白了^!^
  
  回复 ↓
feicun 在 2009年6月20日09:43 说：

看得不太懂……嗯，这方面还是得跟kily学学

回复 ↓
- kily 在 2009年6月20日12:08 说：
  
  呵呵。我也要到你哪儿去学习呢^!^
  
  回复 ↓
hevin 在 2009年6月19日18:21 说：

终于抢到一次沙发，这个以后再学。毕业做销售。

回复 ↓
kily 在 2009年6月19日19:22 说：

呵呵！不错呀。有工作就好好做。行行出状元^!^

回复 ↓

发表评论取消回复