JQuery 鼠标移到一个层上显示另一个层问题

Question

利用JQuery实现 当鼠标移到一级菜单上时, 当一级菜单有子菜单的时候 则下拉显示,
现在出现两个问题,
第一个问题是: 当鼠标移到一级菜单上时, 所有的包含有子菜单的层全都显示出来了 求如何解决.
第二个问题是: 当鼠标快速滑过一级菜单,再把鼠标移到其他地方时, 子菜单层不断的显示关闭, 求如何解决.
JQ效果实现代码如下:
jQuery(document).ready(function ($){
$(".subCategory").hide();
$(".menu").hover (
function(){$(".subCategory").slideDown();},
function(){$(".subCategory").fadeOut();}
);
});
HTML结构代码如下:
<div id="navBox">
<ul id="nav">
<li class="menu">一级菜单 没有子分类</li>
<li class="menu">一级菜单 有子分类
<ul class="subCategory">
<li class="subMenu">二级菜单项目</li>
<li class="subMenu">二级菜单项目</li>
<li class="subMenu">二级菜单项目</li>
</ul>
</li>
<li class="menu">一级菜单 没有子分类</li>
<li class="menu">一级菜单 有子分类
<ul class="subCategory">
<li class="subMenu">二级菜单项目</li>
<li class="subMenu">二级菜单项目</li>
<li class="subMenu">二级菜单项目</li>
</ul>
</li>
<li class="menu">一级菜单 没有子分类</li>
</ul>
</div>
CSS部分代码如下:
#nav{list-style:none;}
.menu{float:left; padding:5px; border:1px solid #ccc; background: #eaeaea; margin:0 5px;}

完整代码因字符超限 打包在微云下载:
http://share.weiyun.com/77e2ef23df2452237769c41a441e8e6c

Answer 1

你好！

第一个问题解决思路：每个一级菜单设置hover事件没有问题，但是你的代码中显示的二级菜单却成为了全局所有的了，所以需要修改为当前一级菜单下面的$(".subCategory")元素，即 $(一级菜单).find(".subCategory")--->>> 这样才会显示为当前一级菜单下的二级菜单。

第二个问题解决思路：由于hover事件中的动画效果没有得到有效的终止，所以在函数队列中会按顺序执行它们，使用stop函数能够有效的终止它们，并直接返回最后的执行结果。

详见附件吧~

Answer 2

第一个问题主要是因为选择器的问题，你的jquery代码选择的是所有的.subCategory，因该选择对应的subCategory。
第二个问题可以用stop([clearQueue], [gotoEnd]) 函数解决
代码如下：
$(function(){
$('#nav li:has(ul)').hover(function(){

//stop([clearQueue], [gotoEnd])
//概述
//停止所有在指定元素上正在运行的动画。
//如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
//参数
//clearQueue (可选)Boolean如果设置成true，则清空队列。可以立即结束动画。
//gotoEnd (可选)Boolean让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。

$(this).children('ul').stop(true,true).slideDown(400);
},function(){
$(this).children('ul').stop(true,true).slideUp('fast');
});

});

Answer 3

好像很不错

Answer 4

$(".subCategory").hide();

$("#navBox ul li.menu").hover(function () {
var k = $("#navBox ul li.menu").index(this);
// alert(k);
$(this).children("ul").slideDown();

}, function () {
$(this).children("ul").fadeOut();
})

Answer 5

修改这段代码

jQuery(document).ready(function ($){
$(".subCategory").hide();
var flag = true;//标志位用来限制当第一个动画完成执行第二个
$(".down,.menu").hover (
function(){if (flag) {$(this).find(".subCategory").slideDown();flag = false}},
function(){$(this).find(".subCategory").fadeOut(function(){
flag = true;
});}
);
});

 绑定事件的时候要找到当前触发事件的对象才行

Answer 6

这个问题首先要从根本上解决，html的结构要清晰才好做，大部分人初期总是把子菜单和主菜单分开，鼠标进入，移除嵌套关系很复杂。其实最核心的一点，子菜单必须包含在主菜单，鼠标进入的事件写在容器上，这样弄就好了。比如：
<ul>
<li onmouseover="鼠标进入，子ul显示"><a href="#">一级菜单</a>
<ul>
<li>1-1</li>
<li>1-2</li>
</ul>
</li>
</ul>
如果一开始把事件写在 <a href="#">一级菜单</a> 上，就会造成js很麻烦，判断mouseover,mouseout等等。
我上面写的是底层的原理，你自己结合jquery优化。