$(document).ready(function(){
??var?sub=$("#sub");
??var?activeRow;
??var?activeMenu;
??var?timer;
??var?mouseInsub=false;
??sub.on("mouseenter",function(e){//判斷鼠標(biāo)是否在二級(jí)菜單中
???mouseInsub=true;
??})
??.on("mouseleave",function(e){
???mouseInsub=false;
??})
??var?mouseTrack?=?[];//定義一個(gè)裝鼠標(biāo)移動(dòng)位置的數(shù)組
??var?moveHandler?=?function(e){//獲取鼠標(biāo)移動(dòng)點(diǎn)的位置
???mouseTrack.push({
????x:e.pageX,
????y:e.pageY
???})
???if(mouseTrack.length>3){//只保存最新的三個(gè)鼠標(biāo)位置點(diǎn)
????mouseTrack.shift();//刪除數(shù)組中的第一個(gè)元素，并返回第一元素的值
???}
??}
??$("#test")
??.on("mouseenter",function(e){
???sub.removeClass('none');
???$(document).bind("mousemove",moveHandler);//目的是為了獲取鼠標(biāo)在一級(jí)菜單中上一次的位置和當(dāng)前的位置，通過判斷當(dāng)前位置滿不滿足在三角形內(nèi)來判斷是否延遲
??})
??.on("mouseleave",function(e){
???sub.addClass('none');
???if(activeRow){
????activeRow.removeClass("active");
????activeRow=null;
???}
???if(activeMenu){
????activeMenu.addClass("none");
????activeMenu=null;
???}
???$(document).unbind("mousemove",moveHandler);

??})
??.on("mouseenter","li",function(e){
???if(!activeRow){//如果鼠標(biāo)不在一級(jí)菜單內(nèi)
????activeRow=$(e.target);
????activeRow.addClass("active");
????activeMenu=$("#"+activeRow.data("id"));
????activeMenu.removeClass("none");
????return?f;
???}
???if(timer){
????clearTimeout(timer);//不能理解debunce
???}
???var?currMousePos?=?mouseTrack[mouseTrack.length-1];
???var?leftCorner?=?mouseTrack[mouseTrack.length-2];
???var?delay?=?needDelay(sub,leftCorner,currMousePos);
???if(delay){
??timer=setTimeout(function(){
???if(mouseInsub){//300毫秒之后，如果鼠標(biāo)在二級(jí)菜單里面，就不執(zhí)行
????return?false;
???}
???//去掉上一個(gè)li的active&把對(duì)應(yīng)的二級(jí)菜單隱藏
???????activeRow.removeClass("active");
????activeMenu.addClass("none");
???//為當(dāng)前l(fā)i的添加active&把對(duì)應(yīng)的二級(jí)菜單顯示
????activeRow=$(e.target);
????activeRow.addClass("active");
????activeMenu=$("#"+activeRow.data("id"));
????activeMenu.removeClass("none");
????timer=null;
???},300);
????
}
else{
?var?preActiveRow=activeRow;
?var?preActiveMenu=activeMenu;
?
?activeRow=$(e.target);
?activeRow.addClass("active");
?preActiveRow.removeClass("active");
?preActiveMenu.addClass("none");
?activeMenu=$("#"+activeRow.data('id'));
?activeMenu.removeClass("none");
}
???
??})
})
//第二部分
function?sameSign(a,b){
?return(a^b)>=0;
}
//向量定義
function?vector(a,b){
?return{
??x:?b.x-a.x,
??y:?b.y-a.y
?}
}
//向量的叉乘運(yùn)算
function?vectorProduct(v1,v2){
?return?v1.x?*?v2.y?-?v2.x?*?v1.y;
}
//叉乘判斷
function?isPointInTrangle(p,a,b,c){//p是當(dāng)前鼠標(biāo)位置，a是鼠標(biāo)的上一個(gè)位置
?var?pa=vector(p,a);
?var?pb=vector(p,b);
?var?pc=vector(p,c);
?var?t1?=?vectorProduct(pa,pb);
?var?t2?=?vectorProduct(pb,pc);
?var?t3?=?vectorProduct(pc,pa);
?return?sameSign(t1,t2)&&sameSign(t2,t3);
}
function?needDelay(elem,leftCorner,currMousePos){
?var?offset?=?elem.offset();//offset獲取二級(jí)邊框的上下邊緣
?var?topLeft?=?{
??x:offset.left,
??y:offset.top
?}
?var?bottomLeft={
??x:offset.left,
??y:offset.top+elem.height()
?}
?return?isPointInTrangle(currMousePos,leftCorner,topLeft,bottomLeft);
}
//推薦一個(gè)有關(guān)叉乘的鏈接???
希望能幫助到大家（一定要自己敲呦）