这个函数实现了一个小功能: 一级下拉菜单的功能, 加入延时机制, 可以防止弹出或隐藏过快, 代码中用的fadeIn,fadeOut是渐显渐隐效果,修改一下就可以实现其他效果.使用中首先要确定两个dom元素, 用css先定位好, 并给这两个加上唯一id或是class做为引用, 然后使用下面这个函数绑定一种鼠标动作来触发即可
简的例子
一级目录
- 二级目录1
- 二级目录2
- 二级目录3
- 二级目录4
再来一个实用的
此方法要求页面已经使用了jQuery库
/**
* 显示隐藏下拉菜单效果
*
* selector1: 当鼠标click 选择器selector1元素时, 显示选择器selector2元素, 当鼠标进入selector2并从selector2上离开时, 200ms内隐藏selector2, 如果在离开selector2又立刻(200ms内)回到selector2上, 则不会关闭
* selector2: 被显示隐藏的dom
* type: 是dom元素响应什么类型的动作(鼠标甚至tab的焦点), 这里使用的字符串是与jquery中on()动作中可以使用的动作相同的, 这里使用click为例
*/
function showhide(selector1, selector2, type){
var timer = {};
var key = "___showhide_uuid"
//取得全局唯一标志符
var UUID = function(){
if(!window[key]) window[key] = 1;
return window[key]++;
}
//先检查目标有没有uuid
var uuid = $(selector1).eq(0).attr(key);
if(!uuid){
uuid = UUID();
}
//将uuid添加到dom上
$(selector1).attr(key, uuid);
$(selector2).attr(key, uuid);
//确定动作
type = type || "mouseenter";
//绑定动作
var call = function(_this, callback){
var _uuid = $(_this).attr(key);
if(timer[_uuid]) clearInterval(timer[_uuid]);
timer[_uuid] = setTimeout(function(){callback.call();},200);
}
$(selector1)[type](function(){
call(this, function(){$(selector2).fadeIn(100);});
}).mouseleave(function(){
call(this, function(){$(selector2).fadeOut(200);});
});
$(selector2).mouseenter(function(){
call(this, function(){});
}).mouseleave(function(){
call(this, function(){$(selector2).fadeOut(200);});
});
}
/*
使用方法
showhide(".J_C_Game",".J_C_Game_T","mouseenter");
showhide(".J_C_Game",".J_C_Game_T","click");
...
*/
总结一下: 此方法的存在价值就在于使用了延时机制, 可以大提升使用体验
如: 一般的方法: $(二级菜单).mouseout(function(){$(this).hide()});
如果二级菜单中存在超级链接, 鼠标在二级菜单上面移动会导致其隐藏,
使用此方法可以防止这种情况发生