开发基本菜单结构，
普通二级菜单效果，
加入延迟解决移动问题，
解决延迟引入的新问题
效果图.png
<style type="text/css">
.wrap{
position: relative;width: 200px;top: 50px;left: 50px
}
ul{
padding: 15px 0;margin: 9;list-style: none;background: #6c6669;color: #ffffff; border-right-width: 0
}
li{
display: block;height: 30px;line-height: 30px;padding-left: 12px;cursor: pointer;font-size: 14px;position: relative;
}
/*用类控制有利于JS增删类*/
li.active{
background: #999395;
}
li span:hover{
color: #c81623;
}
.none{
display: none
}
#sub{
width: 600px;position: absolute;border: 1px solid #f7f7f7;background: #f7f7f7;box-shadow: 2px 0 5px rgba(0,0,0,.3);top: 0;left: 200px;box-sizing: border-box;margin: 0;padding: 10px;
}
.sub_content a{
font-size: 12px;color: #666;text-decoration: none;
}
.sub_content dd a{
border-left: 1px solid #e0e0e0;padding: 0 10px;margin: 4px 0;
}
/*清除浮动 BFC*/
.sub_content dl{
overflow:hidden;
}
.sub_content dt{
float: left;width: 70px;font-weight: bold;clear: left;position: relative;
}
.sub_content dd{
float: left;margin-left: 5px;border-top: 1px solid #eee;margin-bottom: 5px;
}
.sub_content dt i{
width: 4px;height: 14px;font:400 9px/14px consolas;position: absolute; right: 5px;top: 5px;
}
</style>
<div class="wrap" id="test">
<ul>
<li data-id="a">
<span>家用电器</span>
</li>
<li data-id="b">
<span>手机 / 运营商 / 数码 </span>
</li>
<li data-id="c">
<span>电脑 / 办公</span>
</li>
<li data-id="d">
<span>家居 / 家具 / 家装 / 厨具 </span>
</li>
<li data-id="e">
<span>男装 / 女装 / 童装 / 内衣</span>
</li>
</ul>
<div id="sub" class="none">
<div id="a" class="sub_content none">
<dl>
<dt>
<a href="#">电视<i>></i></a>
</dt>
<dd>
<a href="#">合资品牌</a>
<a href="#">国产品牌</a>
<a href="#">互联网品牌</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">空调<i>></i></a>
</dt>
<dd>
<a href="#">中央空调</a>
<a href="#">格式空调</a>
<a href="#">挂式空调</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">洗衣机<i>></i></a>
</dt>
<dd>
<a href="#">波轮洗衣机</a>
<a href="#">烘托一体机</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">冰箱<i>></i></a>
</dt>
<dd>
<a href="#">多门</a>
<a href="#">对开门</a>
<a href="#">三门</a>
</dd>
</dl>
</div>
<div id="b" class="sub_content none">
<dl>
<dt>
<a href="#">手机通讯<i>></i></a>
</dt>
<dd>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">以旧换新</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">手机配件<i>></i></a>
</dt>
<dd>
<a href="#">合资品牌</a>
<a href="#">国产品牌</a>
<a href="#">互联网品牌</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">运营商<i>></i></a>
</dt>
<dd>
<a href="#">合约机</a>
<a href="#">固定电话</a>
<a href="#">宽带</a>
</dd>
</dl>
</div>
<div id="c" class="sub_content none">
<dl>
<dt>
<a href="#">电脑整机<i>></i></a>
</dt>
<dd>
<a href="#">笔记本</a>
<a href="#">游戏本</a>
<a href="#">平板电脑</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">电脑配件<i>></i></a>
</dt>
<dd>
<a href="#">显示器</a>
<a href="#">CPU</a>
<a href="#">主板</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">外设产品<i>></i></a>
</dt>
<dd>
<a href="#">鼠标</a>
<a href="#">键盘</a>
</dd>
</dl>
</div>
<div id="d" class="sub_content none">
<dl>
<dt>
<a href="#">厨具<i>></i></a>
</dt>
<dd>
<a href="#">烹饪锅具</a>
<a href="#">保温杯</a>
<a href="#">菜板刀具</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">家纺<i>></i></a>
</dt>
<dd>
<a href="#">被子</a>
<a href="#">枕芯</a>
<a href="#">蚊帐</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">生活日用<i>></i></a>
</dt>
<dd>
<a href="#">收纳用品</a>
<a href="#">雨伞雨具</a>
</dd>
</dl>
</div>
<div id="e" class="sub_content none">
<dl>
<dt>
<a href="#">女装<i>></i></a>
</dt>
<dd>
<a href="#">商场同款</a>
<a href="#">当即热卖</a>
<a href="#">2017新品</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">男装<i>></i></a>
</dt>
<dd>
<a href="#">牛仔裤</a>
<a href="#">休闲裤</a>
<a href="#">衬衫</a>
</dd>
</dl>
<dl>
<dt>
<a href="#">内衣<i>></i></a>
</dt>
<dd>
<a href="#">大码内衣</a>
<a href="#">打底衫</a>
</dd>
</dl>
</div>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src='function.js'></script>
<script type="text/javascript">
// 事件代理方式进行绑定mouseenter/mouseover的区别：
// mouseover和mouseout,如果鼠标移动到子元素上，即便没有离开父元素，也会触发父元素的mouseout事件，mouseenter/mouseleave，如果鼠标没有离开父元素，在子元素上任意移动，也不会触发mouseleave事件
$(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).on('mousemove',moveHandler)
})
.on('mouseleave',function(e){
sub.addClass('none');//二级菜单隐藏
// console.log(activeRow)
if (activeRow) {
activeRow.removeClass('active');
activeRow = null;
}
if(activeMenu){
activeMenu.addClass('none');
activeMenu = null;
}
$(document).unbind('mousemove',moveHandler)//解绑mousemove
})
.on('mouseenter','li',function(e){//事件代理方式绑定
if (!activeRow) {
activeRow = $(e.target).addClass('active');
activeMenu = $('#'+activeRow.data('id'));
activeMenu.removeClass('none');
return
}
// 加入延迟优化
// 切换子菜单的时候，用setTimeout设置延迟。（但是不能迅速切换）
// debounce去抖技术，在事件频繁触发时，只执行一次处理，最后一次(计时器还没执行的时候，清除计时器，并在计时器设置空)
if (timer) {
clearTimeout(timer)
}
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) {
return
}
//li之间切换，清除之前状态
activeRow.removeClass('active');
activeMenu.addClass('none');
// 指向当前li
activeRow = $(e.target)
activeRow.addClass('active')
activeMenu = $('#'+activeRow.data('id'));
activeMenu.removeClass('none')
timer = null;
},300)
}else{
var prevActiveRow = activeRow;
var prevActiveMenu = activeMenu;
activeRow = $(e.target)
activeMenu = $('#'+activeRow.data('id'));
prevActiveRow.removeClass('active')
prevActiveMenu.addClass('none')
activeRow.addClass('active')
activeMenu.removeClass('none')
}
})
// 基于用户行为预测的切换技术
// 跟踪鼠标的移动
// 用鼠标当前位置，和鼠标上一次位置与子菜单上下边缘形成的三角形区域进行比较
})
</script>
function.js封装的函数：
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){
var pa = vector(p,a)
var pb = vector(p,b)
var pc = vector(p,c)
var t1 = vectorProduct(pa,pb)
var t2 = vectorProduct(pa,pc)
var t3 = vectorProduct(pb,pc)
return sameSign(t1,t2) && sameSign(t2,t3)
}
function needDelay(elem,leftCorner,currMousePos){
var offset = elem.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)
}
