我在做一个导航下拉菜单的时候遇到的问题:
这个按钮和div之间可能有一条缝,使得将鼠标从按钮移到显示的div时,上面的代码交替执行,使得div的显示会闪一下,好像是:出了按钮它立即隐藏而进入div时又立即显示,所以会使得这个div跳动一下,如何才能解决这个问题?
js片段:
[code lang=”js”]
smf(".shanmao_diy_menu:first").css({cursor:"pointer"}).append("<div class=menuimg ><img src=http://forum.cityofsteam.com/bbsimg/bbs_diy_menu.jpg width=216 border=0 usemap=#Map2 class=imgmenu /></div>");
smf(".topnav").mouseenter(function(){
smf(".imgmenu").slideDown().addClass("hover_a");
});
smf(".imgmenu").mouseleave(function(){
var thisdiv = smf(".imgmenu");
thisdiv.removeClass("hover_a");
setTimeout(function(){
if(!thisdiv.hasClass("hover_a")){
thisdiv.slideUp();
}
},4000)//延迟
})
smf("#Map2 area").mouseover(function(){//鼠标在热点的时候添加class
smf(".imgmenu").addClass("hover_a");
}).click(function(){
smf(".imgmenu").slideUp();
})
[/code]
主要思路是,当鼠标在当前div的时候添加一个class=hover_a
然后用hasClass方法判断是否存在这个class
如果不存在则隐藏导航菜单。
这里设置一个延迟,有一个缓冲时间,不会立刻就把div隐藏起来
我这里是用一张图片做导航。用热点;
鼠标在热点的也要时候添加class
这样就不会自动收回去了。
思路就是这样。
本文出自:http://shanmao.me