非父子关系或非兄弟关系的元素实现移入显示二级菜单,移出二级菜单恢复原样。
/*参数说明:
hoverFrom 触发控件
hoverLayer 二级菜单元素
showDelay 延迟时长
*/
function mysecondLevelMenu(hoverFrom, hoverLayer, showDelay) {
var hover$ = $(hoverLayer); //接收显示控件
var timeout; //定义变量接收移出定时器
var showTimeout; //定义变量接收移入定时器
var showDelay = showDelay || 0; //显示延迟时长,不传参默认为0
$(hoverFrom + ',' + hoverLayer).on('mouseenter', function (e) { //触发控件和显示控件鼠标移入事件
e.preventDefault(); //取消默认行为
e.stopPropagation(); //取消冒泡
//移入hover层和hover触发者
clearTimeout(timeout); //清除移出定时器
clearTimeout(showTimeout); //清除移入定时器
showTimeout = setTimeout(function () { //设置移入定时器代码
//显示二级菜单的代码
}, showDelay);//设置时长
}).on('mouseleave', function (e) {//定义鼠标移出事件
e.preventDefault(); //取消默认行为
e.stopPropagation(); //取消冒泡
//移出hover层和hover触发者,因为元素间隔和子元素的原因,可能会频发触发out,所以使用延迟避免闪烁
clearTimeout(timeout); //清除移出定时器
clearTimeout(showTimeout); //清除移入定时器
timeout = setTimeout(function () {//移出定时器
//隐藏二级菜单的代码
}, 100);
});
};