利用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
你好！
第一个问题解决思路：每个一级菜单设置hover事件没有问题，但是你的代码中显示的二级菜单却成为了全局所有的了，所以需要修改为当前一级菜单下面的$(".subCategory")元素，即 $(一级菜单).find(".subCategory")--->>> 这样才会显示为当前一级菜单下的二级菜单。
第二个问题解决思路：由于hover事件中的动画效果没有得到有效的终止，所以在函数队列中会按顺序执行它们，使用stop函数能够有效的终止它们，并直接返回最后的执行结果。
详见附件吧~
第二个问题可以用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');
});
});
$("#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(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;
});}
);
});
绑定事件的时候要找到当前触发事件的对象才行
<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优化。
