$(document).ready(function(){
??var?sub=$("#sub");
??var?activeRow;
??var?activeMenu;
??var?timer;
??var?mouseInsub=false;
??sub.on("mouseenter",function(e){//判斷鼠標是否在二級菜單中
???mouseInsub=true;
??})
??.on("mouseleave",function(e){
???mouseInsub=false;
??})
??var?mouseTrack?=?[];//定義一個裝鼠標移動位置的數組
??var?moveHandler?=?function(e){//獲取鼠標移動點的位置
???mouseTrack.push({
????x:e.pageX,
????y:e.pageY
???})
???if(mouseTrack.length>3){//只保存最新的三個鼠標位置點
????mouseTrack.shift();//刪除數組中的第一個元素，并返回第一元素的值
???}
??}
??$("#test")
??.on("mouseenter",function(e){
???sub.removeClass('none');
???$(document).bind("mousemove",moveHandler);//目的是為了獲取鼠標在一級菜單中上一次的位置和當前的位置，通過判斷當前位置滿不滿足在三角形內來判斷是否延遲
??})
??.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){//如果鼠標不在一級菜單內
????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毫秒之后，如果鼠標在二級菜單里面，就不執行
????return?false;
???}
???//去掉上一個li的active&把對應的二級菜單隱藏
???????activeRow.removeClass("active");
????activeMenu.addClass("none");
???//為當前li的添加active&把對應的二級菜單顯示
????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
?}
}
//向量的叉乘運算
function?vectorProduct(v1,v2){
?return?v1.x?*?v2.y?-?v2.x?*?v1.y;
}
//叉乘判斷
function?isPointInTrangle(p,a,b,c){//p是當前鼠標位置，a是鼠標的上一個位置
?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獲取二級邊框的上下邊緣
?var?topLeft?=?{
??x:offset.left,
??y:offset.top
?}
?var?bottomLeft={
??x:offset.left,
??y:offset.top+elem.height()
?}
?return?isPointInTrangle(currMousePos,leftCorner,topLeft,bottomLeft);
}
//推薦一個有關叉乘的鏈接???
希望能幫助到大家（一定要自己敲呦）