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

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

你好！

第一个问题解决思路：每个一级菜单设置hover事件没有问题，但是你的代码中显示的二级菜单却成为了全局所有的了，所以需要修改为当前一级菜单下面的$(".subCategory")元素，即 $(一级菜单).find(".subCategory")--->>> 这样才会显示为当前一级菜单下的二级菜单。
第二个问题解决思路：由于hover事件中的动画效果没有得到有效的终止，所以在函数队列中会按顺序执行它们，使用stop函数能够有效的终止它们，并直接返回最后的执行结果。

详见附件吧~

这个问题首先要从根本上解决，html的结构要清晰才好做，大部分人初期总是把子菜单和主菜单分开，鼠标进入，移除嵌套关系很复杂。其实最核心的一点，子菜单必须包含在主菜单，鼠标进入的事件写在容器上，这样弄就好了。比如：

• 一级菜单
  
  
  
  • 1-1
  
  
  • 1-2
  
  
  
  

如果一开始把事件写在 一级菜单 上，就会造成js很麻烦，判断mouseover,mouseout等等。
我上面写的是底层的原理，你自己结合jquery优化。

修改这段代码

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;
});}
);
});

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

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

好像很不错

第一个问题主要是因为选择器的问题，你的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');
});

});