这个很好，我在细节上花的时间比较多，不过JQuery还得好好去学，不是都能理解
效果图：
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-3.3.1.js"></script>
<script src="test1.js"></script>
<script src="test2.js"></script>
<link rel="stylesheet" href="testjingdong.css" type="text/css">
</head>
<body>
<div class="wrap" id="test">
<ul>
<li data-id="a">
<span >家用电器</span>
</li>
<li data-id="b">
<a >手机</a>/<a >运营商</a>/<a >数码</a>
</li>
<li data-id="c">
<a>电脑</a>/<a>办公</a>
</li>
<li data-id="d">
<a>家具</a>/<a >家居</a>/<a >家电</a>/<a >厨具</a>
</li>
<li data-id="e">
<a>男装</a>/<a>女装</a>/<a>童装</a>/<a>内衣</a>
</li>
<li data-id="f">
<a>美妆</a>/<a>个护清洁</a>/<a>宠物</a>
</li>
<li data-id="g">
<a>女鞋</a>/<a>箱包</a>/<a>珠宝</a>/<a>钟表</a>
</li>
<li data-id="h">
<a>男鞋</a>/<a>运动</a>/<a>户外</a>
</li>
<li data-id="i">
<a>房产</a>/<a>汽车</a>/<a>汽车用品</a>
</li>
<li data-id="j">
<a>母婴</a>/<a>玩具乐器</a>
</li>
<li data-id="k">
<a>食品</a>/<a>酒类</a>/<a>生鲜</a>/<a>特产</a>
</li>
<li data-id="l">
<a>艺术</a>/<a>礼品鲜花</a>/<a>农资植物</a>
</li>
<li data-id="m">
<a>医疗保健</a>/<a>计生情趣</a>
</li>
<li data-id="n">
<a>图书</a>/<a>音像</a>/<a>电子书</a>
</li>
<li data-id="o">
<a>机票</a>/<a>酒店</a>/<a>旅游</a>/<a>生活</a>
</li>
<li data-id="p">
<a>理财</a>/<a>众筹</a>/<a>白条</a>/<a>保险</a>
</li>
<li data-id="q">
<a>安装</a>/<a>维修</a>/<a>清洗保养</a>
</li>
<li data-id="r">
<a>工业品</a>
</li>
</ul>
<div id="sub" class="none">
<div id="a" class="sub-content none">
<dl>
<dd class="nav">
<a href="#">家电馆<i>></i></a>
<a href="#">乡镇专卖店<i>></i></a>
<a href="#">家电服务<i>></i></a>
<a href="#">家电企业购<i>></i></a>
<a href="#">商用电器<i>></i></a>
</dd>
<dt>
<a href="#">电视<i>></i></a>
</dt>
<dd>
<a href="#">曲面电视</a>
<a href="#">超薄电视</a>
<a href="#">OLED电视</a>
<a href="#">4K超清电视</a>
<a href="#">55英寸</a>
<a href="#">65英寸</a>
<a href="#">电视配件</a>
</dd>
<dt>
<a href="#">空调<i>></i></a>
</dt>
<dd>
<a href="#">挂壁式空调</a>
<a href="#">柜式空调</a>
<a href="#">中央空调</a>
<a href="#">一级能效空调</a>
<a href="#">变频空调</a>
<a href="#">1.5匹空调</a>
<a href="#">以旧换新</a>
</dd>
<dt>
<a href="#">洗衣机<i>></i></a>
</dt>
<dd>
<a href="#">滚筒式洗衣机</a>
<a href="#">洗烘一体机</a>
<a href="#">波轮洗衣机</a>
<a href="#">迷你洗衣机</a>
<a href="#">烘干机</a>
<a href="#">洗衣机配件</a>
</dd>
<dt>
<a href="#">冰箱<i>></i></a>
</dt>
<dd>
<a href="#">多门</a>
<a href="#">对开门</a>
<a href="#">三门</a>
<a href="#">双门</a>
<a href="#">冷柜/冰吧</a>
<a href="#">酒柜</a>
<a href="#">冰箱配件</a>
</dd>
<dt>
<a href="#">厨卫大电<i>></i></a>
</dt>
<dd>
<a href="#">油烟机</a>
<a href="#">燃气灶</a>
<a href="#">烟灶套装</a>
<a href="#">集成灶</a>
<a href="#">消毒柜</a>
<a href="#">洗碗机</a>
<a href="#">电热水器</a>
<a href="#">燃气热水器</a>
<a href="#">嵌入式厨电</a>
</dd>
<dt>
<a href="#">厨卫小电<i>></i></a>
</dt>
<dd >
<a href="#">破壁机</a>
<a href="#">电烤箱</a>
<a href="#">电饭煲</a>
<a href="#">电压力锅</a>
<a href="#">咖啡机</a>
<a href="#">豆浆机</a>
<a href="#">料理机</a>
<a href="#">电炖锅</a>
<a href="#">电饼铛</a>
<a href="#">多用途锅</a>
<a href="#">电水壶/热水瓶</a>
<a href="#">微波炉</a>
<a href="#">榨汁机/原汁机</a>
<a href="#">养生壶</a>
<a href="#">电磁炉</a>
<a href="#">面包机</a>
<a href="#">空气炸锅</a>
<a href="#">面条机</a>
<a href="#">电陶炉</a>
<a href="#">煮蛋机</a>
<a href="#">电烧烤炉</a>
</dd>
<dt>
<a href="#">生活电器<i>></i></a>
</dt>
<dd >
<a href="#">吸尘器/除螨仪</a>
<a href="#">空气净化器</a>
<a href="#">取暖电器</a>
<a href="#">扫地机器人</a>
<a href="#">蒸汽拖把/拖地机</a>
<a href="#">干衣机</a>
<a href="#">电话机</a>
<a href="#">饮水机</a>
<a href="#">净水器</a>
<a href="#">除湿机</a>
<a href="#">挂烫机/熨斗</a>
<a href="#">加湿器</a>
<a href="#">电风扇</a>
<a href="#">冷风扇</a>
<a href="#">毛球修剪器</a>
<a href="#">生活电器配件</a>
</dd>
<dt>
<a href="#">个护健康<i>></i></a>
</dt>
<dd >
<a href="#">剃须刀</a>
<a href="#">电动牙刷</a>
<a href="#">电吹风</a>
<a href="#">按摩器</a>
<a href="#">健康秤</a>
<a href="#">卷/直发器</a>
<a href="#">剃/脱毛器</a>
<a href="#">理发器</a>
<a href="#">足浴盆</a>
<a href="#">足疗机</a>
<a href="#">美容器</a>
<a href="#">洁面仪</a>
<a href="#">按摩椅</a>
</dd>
<dt>
<a href="#">家庭影音<i>></i></a>
</dt>
<dd >
<a href="#">家庭影院</a>
<a href="#">KTV音响</a>
<a href="#">迷你音响</a>
<a href="#">DVD</a>
<a href="#">功放</a>
<a href="#">回音壁</a>
<a href="#">影音配件</a>
</dd>
<dt>
<a href="#">进口电器<i>></i></a>
</dt>
<dd >
<a href="#">进口电器</a>
</dd>
</dl>
<div id="img">
<a href="#"><img src="img/1.png" width="80px" alt="shou" id="1" /></a>
<a href="#"><img src="img/2.png" width="80px" alt="shou" id="2" /></a>
<a href="#"><img src="img/3.png" width="80px" alt="shou" id="3" /></a>
<a href="#"><img src="img/4.png" width="80px" alt="shou" id="4" /></a>
<a href="#"><img src="img/5.png" width="80px" alt="shou" id="5" /></a>
<a href="#"><img src="img/6.png" width="80px" alt="shou" id="6" /></a>
<a href="#"><img src="img/7.png" width="80px" alt="shou" id="7" /></a>
<a href="#"><img src="img/8.png" width="80px" alt="shou" id="8" /></a>
<a href="#"><img src="img/9.png" alt="shou" id="9" /></a>
<a href="#"><img src="img/10.png" alt="shou" id="10" /></a>
</div>
</div>
<div id="b" class="sub-content none">
<dl>
<dd class="nav">
<a href="#">玩3C<i>></i></a>
<a href="#">手机频道<i>></i></a>
<a href="#">网上营业厅<i>></i></a>
<a href="#">配件选购中心<i>></i></a>
<a href="#">智能数码<i>></i></a>
<a href="#">影像Club<i>></i></a>
</dd>
<dt>
<a href="#">手机通讯<i>></i></a>
</dt>
<dd>
<a href="#">手机</a>
<a href="#">游戏手机</a>
<a href="#">老人机</a>
<a href="#">对讲机</a>
<a href="#">以旧换新</a>
<a href="#">手机维修</a>
</dd>
<dt>
<a href="#">运营商<i>></i></a>
</dt>
<dd>
<a href="#">合约机</a>
<a href="#">选好嘛·3</a>
<a href="#">固定宽带</a>
<a href="#">办套餐</a>
<a href="#">充话费/流量</a>
<a href="#">中国电信</a>
<a href="#">中国移动</a>
<a href="#">中国联通</a>
<a href="#">京东通信</a>
<a href="#">170选号</a>
</dd>
<dt>
<a href="#">手机配件<i>></i></a>
</dt>
<dd>
<a href="#">手机壳</a>
<a href="#">贴膜</a>
<a href="#">手机存储卡</a>
<a href="#">数据线</a>
<a href="#">充电器</a>
<a href="#">手机耳机</a>
<a href="#">创意配件</a>
<a href="#">手机饰品</a>
<a href="#">手机电池</a>
<a href="#">苹果周边</a>
<a href="#">移动电源</a>
<a href="#">蓝牙耳机</a>
<a href="#">手机支架</a>
<a href="#">车载配件</a>
<a href="#">拍照配件</a>
</dd>
<dt>
<a href="#">摄影摄像<i>></i></a>
</dt>
<dd>
<a href="#">数码相机</a>
<a href="#">单电/微单相机</a>
<a href="#">单反相机</a>
<a href="#">拍立得</a>
<a href="#">运动相机</a>
<a href="#">摄像机</a>
<a href="#">镜头</a>
<a href="#">户外器材</a>
<a href="#">影棚器材</a>
<a href="#">冲印服务·</a>
<a href="#">数码相框</a>
</dd>
<dt>
<a href="#">数码配件<i>></i></a>
</dt>
<dd>
<a href="#">存储卡</a>
<a href="#">三脚架/云台</a>
<a href="#">相机包</a>
<a href="#">滤镜</a>
<a href="#">闪光灯/手柄</a>
<a href="#">相机清洁/贴膜</a>
<a href="#">机身附件</a>
<a href="#">镜头附件</a>
<a href="#">读卡器</a>
<a href="#">支架</a>
<a href="#">移动电源电池/充电器</a>
</dd>
<dt>
<a href="#">影音娱乐<i>></i></a>
</dt>
<dd>
<a href="#">耳机/耳麦</a>
<a href="#">音箱/音响</a>
<a href="#">智能音箱</a>
<a href="#">便携/无线音箱</a>
<a href="#">收音机</a>
<a href="#">麦克风</a>
<a href="#">MP3/MP4</a>
<a href="#">专业音频</a>
<a href="#">音频线</a>
</dd>
<dt>
<a href="#">智能设备<i>></i></a>
</dt>
<dd>
<a href="#">智能手环</a>
<a href="#">智能手表</a>
<a href="#">智能眼镜</a>
<a href="#">智能机器人</a>
<a href="#">运动跟踪器</a>
<a href="#">健康监测</a>
<a href="#">智能配饰</a>
<a href="#">智能家居</a>
<a href="#">体感车</a>
<a href="#">无人机</a>
</dd>
<dt>
<a href="#">电子教育<i>></i></a>
</dt>
<dd>
<a href="#">学生平板</a>
<a href="#">点读机/笔</a>
<a href="#">早教益智</a>
<a href="#">录音笔</a>
<a href="#">电纸书</a>
<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>
<dt>
<a href="#">电脑配件<i>></i></a>
</dt>
<dd>
<a href="#">显示器</a>
<a href="#">CPU</a>
<a href="#">主板</a>
</dd>
<dt>
<a href="#">外设产品<i>></i></a>
</dt>
<dd>
<a href="#">鼠标</a>
<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>
<a href="#">水具酒具</a>
</dd>
<dt>
<a href="#">家纺<i>></i></a>
</dt>
<dd>
<a href="#">床品套件</a>
<a href="#">被子</a>
<a href="#">枕芯</a>
<a href="#">蚊帐</a>
</dd>
<dt>
<a href="#">生活日用<i>></i></a>
</dt>
<dd>
<a href="#">收纳用品</a>
<a href="#">雨伞雨具</a>
<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>
<a href="#">连衣裙</a>
</dd>
<dt>
<a href="#">男装<i>></i></a>
</dt>
<dd>
<a href="#">商城同款</a>
<a href="#">当季热卖</a>
<a href="#">2017新品</a>
<a href="#">牛仔裤</a>
</dd>
</dl>
</div>
<div id="f" class="sub-content none">
<dl>
<dt>
<a href="#">面部护肤<i>></i></a>
</dt>
<dd>
<a href="#">补水保湿</a>
<a href="#">卸妆</a>
<a href="#">洁面</a>
</dd>
</dl>
</div>
<div id="g" class="sub-content none">
<dl>
<dt>
<a href="#">时尚女鞋<i>></i></a>
</dt>
<dd>
<a href="#">新品推荐</a>
<a href="#">单鞋</a>
<a href="#">休闲鞋</a>
</dd>
<dt>
<a href="#">潮流女包<i>></i></a>
</dt>
<dd>
<a href="#">真皮包</a>
<a href="#">单肩包</a>
<a href="#">手提包</a>
</dd>
<dt>
<a href="#">精品男包<i>></i></a>
</dt>
<dd>
<a href="#">男士钱包</a>
<a href="#">双肩包</a>
<a href="#">单肩/斜挎包</a>
</dd>
</dl>
</div>
<div id="h" class="sub-content none">
<dl>
<dt>
<a href="#">流行男鞋<i>></i></a>
</dt>
<dd>
<a href="#">新品推荐</a>
<a href="#">商务休闲鞋</a>
<a href="#">休闲鞋</a>
</dd>
<dt>
<a href="#">运动鞋包<i>></i></a>
</dt>
<dd>
<a href="#">跑步鞋</a>
<a href="#">休闲鞋</a>
<a href="#">篮球鞋</a>
</dd>
<dt>
<a href="#">运动服饰<i>></i></a>
</dt>
<dd>
<a href="#">T恤</a>
<a href="#">运动套装</a>
<a href="#">运动裤</a>
</dd>
</dl>
</div>
<div id="i" class="sub-content none">
<dl>
<dt>
<a href="#">房产<i>></i></a>
</dt>
<dd>
<a href="#">最新开盘</a>
<a href="#">普通住宅</a>
<a href="#">别墅</a>
</dd>
<dt>
<a href="#">汽车车型<i>></i></a>
</dt>
<dd>
<a href="#">微型车</a>
<a href="#">小型车</a>
<a href="#">紧凑型车</a>
</dd>
<dt>
<a href="#">汽车价格<i>></i></a>
</dt>
<dd>
<a href="#">5万以上</a>
<a href="#">5-8万</a>
<a href="#">8-10万</a>
</dd>
</dl>
</div>
<div id="j" class="sub-content none">
<dl>
<dt>
<a href="#">奶粉<i>></i></a>
</dt>
<dd>
<a href="#">1段</a>
<a href="#">2段</a>
<a href="#">3段</a>
</dd>
<dt>
<a href="#">营养辅食<i>></i></a>
</dt>
<dd>
<a href="#">米粉/菜粉</a>
<a href="#">面条/粥</a>
<a href="#">果泥/果汁</a>
</dd>
<dt>
<a href="#">尿裤湿巾<i>></i></a>
</dt>
<dd>
<a href="#">NB</a>
<a href="#">S</a>
<a href="#">M</a>
</dd>
</dl>
</div>
<div id="k" class="sub-content none">
<dl>
<dt>
<a href="#">新鲜水果<i>></i></a>
</dt>
<dd>
<a href="#">苹果</a>
<a href="#">橙子</a>
<a href="#">奇异果/泥猴桃</a>
</dd>
<dt>
<a href="#">蔬菜蛋品<i>></i></a>
</dt>
<dd>
<a href="#">蛋品</a>
<a href="#">叶菜类</a>
<a href="#">根茎类</a>
</dd>
<dt>
<a href="#">精选肉类<i>></i></a>
</dt>
<dd>
<a href="#">猪肉</a>
<a href="#">牛肉</a>
<a href="#">羊肉</a>
</dd>
</dl>
</div>
<div id="l" class="sub-content none">
<dl>
<dt>
<a href="#">艺术品<i>></i></a>
</dt>
<dd>
<a href="#">油画</a>
<a href="#">版画</a>
<a href="#">水墨画</a>
</dd>
<dt>
<a href="#">火机烟具<i>></i></a>
</dt>
<dd>
<a href="#">电子烟</a>
<a href="#">烟油</a>
<a href="#">打火机</a>
</dd>
<dt>
<a href="#">礼品<i>></i></a>
</dt>
<dd>
<a href="#">创意礼品</a>
<a href="#">电子礼品</a>
<a href="#">工艺礼品</a>
</dd>
</dl>
</div>
<div id="m" class="sub-content none">
<dl>
<dt>
<a href="#">中西药品<i>></i></a>
</dt>
<dd>
<a href="#">感冒咳嗽</a>
<a href="#">补肾壮阳</a>
<a href="#">补气滋血</a>
</dd>
<dt>
<a href="#">营养健康<i>></i></a>
</dt>
<dd>
<a href="#">增强免疫</a>
<a href="#">骨骼健康</a>
<a href="#">补肾强身</a>
</dd>
<dt>
<a href="#">营养成分<i>></i></a>
</dt>
<dd>
<a href="#">维生素/矿物质</a>
<a href="#">胶原蛋白</a>
<a href="#">益生菌</a>
</dd>
</dl>
</div>
<div id="n" class="sub-content none">
<dl>
<dt>
<a href="#">文学<i>></i></a>
</dt>
<dd>
<a href="#">小说</a>
<a href="#">散文随笔</a>
<a href="#">青春文学</a>
</dd>
<dt>
<a href="#">童书<i>></i></a>
</dt>
<dd>
<a href="#">0-2岁</a>
<a href="#">3-6岁</a>
<a href="#">7-10岁</a>
</dd>
<dt>
<a href="#">教材教辅<i>></i></a>
</dt>
<dd>
<a href="#">教材</a>
<a href="#">中小学教辅</a>
<a href="#">考试</a>
</dd>
</dl>
</div>
<div id="o" class="sub-content none">
<dl>
<dt>
<a href="#">交通出行<i>></i></a>
</dt>
<dd>
<a href="#">国内机票</a>
<a href="#">国际机票</a>
<a href="#">火车票</a>
</dd>
<dt>
<a href="#">酒店预订<i>></i></a>
</dt>
<dd>
<a href="#">国内酒店</a>
<a href="#">国际酒店</a>
<a href="#">酒店套餐</a>
</dd>
<dt>
<a href="#">旅游度假<i>></i></a>
</dt>
<dd>
<a href="#">国内旅游</a>
<a href="#">出境旅游</a>
<a href="#">全球签证</a>
</dd>
</dl>
</div>
<div id="p" class="sub-content none">
<dl>
<dt>
<a href="#">理财<i>></i></a>
</dt>
<dd>
<a href="#">京东小金库</a>
<a href="#">基金理财</a>
<a href="#">定期理财</a>
</dd>
<dt>
<a href="#">众筹<i>></i></a>
</dt>
<dd>
<a href="#">智能硬件</a>
<a href="#">流行文化</a>
<a href="#">生活美学</a>
</dd>
<dt>
<a href="#">东家<i>></i></a>
</dt>
<dd>
<a href="#">类固收</a>
<a href="#">私募股权</a>
<a href="#">阳光私募</a>
</dd>
</dl>
</div>
<div id="q" class="sub-content none">
<dl>
<dt>
<a href="#">家电安装<i>></i></a>
</dt>
<dd>
<a href="#">空调安装</a>
<a href="#">洗衣机安装</a>
<a href="#">电视安装</a>
</dd>
<dt>
<a href="#">办公安装<i>></i></a>
</dt>
<dd>
<a href="#">电脑安装</a>
<a href="#">办公设备安装</a>
</dd>
<dt>
<a href="#">家居安装<i>></i></a>
</dt>
<dd>
<a href="#">家具安装</a>
<a href="#">灯具安装</a>
<a href="#">智能家居安装</a>
</dd>
</dl>
</div>
<div id="r" class="sub-content none">
<dl>
<dt>
<a href="#">工具<i>></i></a>
</dt>
<dd>
<a href="#">手动工具</a>
<a href="#">电动工具</a>
<a href="#">测量工具</a>
</dd>
<dt>
<a href="#">劳动防护<i>></i></a>
</dt>
<dd>
<a href="#">手部防护</a>
<a href="#">足部防护</a>
<a href="#">身体防护</a>
</dd>
<dt>
<a href="#">工控配电<i>></i></a>
</dt>
<dd>
<a href="#">电线电缆</a>
<a href="#">开关插座</a>
<a href="#">低压配电</a>
</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
test1:
$(document).ready(function(){/*错误一document写错。*/
var sub= $ ('#sub') /*1申明变量指向二级菜单*/
/*1定义变量一级菜单中行,以及菜单*/
var activeRow
var activeMenu
/*2在显示二级菜单后，进行延迟问题处理，加入变量时间*/
var timer
//2鼠标在子菜单里
var mouseInsub = false
/*最终优化问题3*/
//3给鼠标位置设置相关的数组
var mouseTrack = []
var moveHanlder = function(e){
//3利用push属性获得鼠标相对于页面的坐标
mouseTrack.push({
x: e.pageX,
y: e.pageY
})
//3保存有限个数组信息就好
if(mouseTrack.length>3)
{
mouseTrack.shift()
}
}
//1给鼠标把绑定事件
sub.on('mouseenter',function(e){
mouseInsub = true//进入
}).on('mouseleave',function(e){
mouseInsub = false//离开
})//1之后再进行第二次菜单栏时候，需要if判断
$('#test')
.on('mouseenter',function(e){
/*1指向一级菜单*/
sub.removeClass('none')
$(document).bind('mousemove',moveHanlder)
})
.on('mouseleave',function(e){
sub.addClass('none')
if (activeRow){
activeRow.removeClass('active')
activeRow =null
/*1如果存在行，去掉，置空*/
}
/*1对于对应的二级菜单同样操作*/
if(activeMenu){
activeMenu.addClass('none')
activeMenu = null
}
//3数组，处理时避免影响其他
$(document).unbind('mousemove',moveHanlder)
})/*鼠标指示时候显示，离开的时候隐藏*/
/*2为一级菜单中列表绑定事件。采用事件代理方式。利用事件冒泡*/
.on('mouseenter','li',function(e){
if(!activeRow)
{
activeRow = $(e.target).addClass('active')
activeMenu = $('#' + activeRow.data('id'))
activeMenu.removeClass('none')
return
}
/*2处理问题2去抖动。如果进行频繁的操作，进行处理使其只执行最后一次*/
//计时器没有执行时候，清理，在计时器算法结束时设置 timer=null
//debounce去抖，事件频繁被触动时，只执行最后一次。这里没有他的具体算法，只有大致原理
//53行和78行，设置if(timer)函数。
if (timer)
{
clearTimeout(timer)
}
/*3三角形区域各点坐标*/
var currMousePos = mouseTrack[mouseTrack.length - 1]
var leftCorner = mouseTrack[mouseTrack.length - 2]
var delay = needDelay(sub, leftCorner,currMousePos)
//3333333
if (delay){
//3进行下一项菜单栏
//在返回return后,设置延迟300毫秒，设置一个缓冲期，当鼠标还在当前子菜单时，不会进行下一
//命令。同时声明鼠标变量正在子菜单里，用setTimeout来设置延迟。
timer = setTimeout(function(){
/*2如果在上一菜单子菜单里，不处理立即返回*/
if(mouseInsub){
return
}
/*1从一级菜单到二级菜单，需要清除上一列*/
activeRow.removeClass('active')
activeMenu.addClass('none')
/*1指向当前*/
activeRow = $ (e.target)
activeRow.addClass('active')
activeMenu = $('#' + activeRow.data('id'))
activeMenu.removeClass('none')/*1*/
timer = null //2去抖动时候，设置timer为null,保障执行鼠标最后停留位置
},300)
}else{
//3这是最后指向下一菜单。
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')
}
})
})
test2:
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
}
/* 二级菜单页面（B， C）最上，最下方坐标*/
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(pb,pc)
var t3 = vectorProduct(pc,pa)
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)
}CSS:
@charset "utf-8";
/* CSS Document */
body{
background-color: #F8F8F8;
}
.wrap{
position: relative;
width: 170px;
left: 50px;
top: 35px;
}
ul{/*背景，右边框像素，*/
padding: 15px 0;
margin: 9;
list-style: none;
background-color:white;
color:dimgray;
border-right-width: 0;
font-family: "微软雅黑";
}
li{/*居中设置height和line-height相同*/
display: block;
height: 26.9px;
line-height: 20px;
padding-left: 12px;
cursor: pointer;
font-size: 13px;
position: relative;
color:#878383;
text-decoration: none;
}
li.active{
background:#E8E8E8;
}
li:hover{
background:#E8E8E8;
}
li span:hover{
color: red;
}
ul:hover{
box-shadow: 0.1px 0.1px 0.1px 0.1px #C4BEBE;
}
li[data-id="b"] a:hover,li[data-id="c"] a:hover,li[data-id="d"] a:hover,li[data-id="e"] a:hover,li[data-id="f"] a:hover,li[data-id="g"] a:hover,li[data-id="h"] a:hover,li[data-id="i"] a:hover,li[data-id="j"] a:hover,li[data-id="k"] a:hover,li[data-id="l"] a:hover,li[data-id="m"] a:hover,li[data-id="n"] a:hover,li[data-id="o"] a:hover,li[data-id="p"] a:hover,li[data-id="q"] a:hover,li[data-id="r"] a:hover{
color: red;
}
.none{
display: none;/*隐藏类*/
}
#sub{
width:1020px;
height:512px;
position: absolute;
border-left:1px solid #f7f7f7;
background:white;
box-shadow:2px 2px #C4BEBE;
left: 175px;
top:0;
box-sizing:border-box;
margin: 0 -5px;
padding:0 0 0 20px;
}
#img{
width: 175px;
float: right;
position: relative;
top: -420px;
left: -20px;
}
.sub-content a{
font-size: 12px;
color:#666;
text-decoration:none;
}
.sub-content dt a:hover{
color: red;
}
.nav a{
width: 100px;
height: 80px;
background-color: black;
color: white;
margin: 0 30px 5px -10px;
padding: 3px 2px 3px 3px;
font-family: "Angsana New";
}
.nav a:hover{
background-color: #999395;
}
.nav a i{
padding: 15px;
}
.sub-content dd a{
border-left: 1px solid #E8E8E8;
padding: 0 10px;
margin: -2px;
}
.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: 8px;
margin-bottom: 10px;
margin-top: -1px;
width:690px;
}
.sub-content dt i{
width:4px;
height: 14px;
font:400 9px/14px consolas;
position: absolute;
right:5px;
top:5px;
}
.sub-content dt a{
float: right;
margin: 5px 20px 0 0;
}
.sub-content dd a:hover{
color: red;
}
扫一扫
1189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
