                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /JS實現(xiàn)京東無延遲菜單效果

跟著老師碼的代碼，顯示效果不一樣，請各位大牛幫忙看看哪出了問題

//html

<!DOCTYPE html>
<html>
<head>
? ?<meta charset="UTF-8">
? ?<title>京東無延遲菜單</title>
? ?<link rel="stylesheet" href="1.css" type="text/css">
</head>
<body>
? ?<div class="wrap" id="test">
? ? ? ?<ul>
? ? ? ? ? ?<li data-id="a">
? ? ? ? ? ? ? ?<span>家用電器</span>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li data-id="b">
? ? ? ? ? ? ? ?<span>手機/運營商/數(shù)碼</span>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li data-id="c">
? ? ? ? ? ? ? ?<span>電腦辦公</span>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li data-id="d">
? ? ? ? ? ? ? ?<span>家居/家具/家裝/廚具</span>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li data-id="e">
? ? ? ? ? ? ? ?<span>男裝/女裝/童裝/內(nèi)衣</span>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li data-id="f">
? ? ? ? ? ? ? ?<span>個護化妝/清潔用品/寵物</span>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li data-id="g">
? ? ? ? ? ? ? ?<span>鞋靴/箱包/珠寶/奢侈品</span>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li data-id="h">
? ? ? ? ? ? ? ?<span>運動/戶外/鐘表</span>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li data-id="i">
? ? ? ? ? ? ? ?<span>汽車/汽車用品</span>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li data-id="j">
? ? ? ? ? ? ? ?<span>女嬰/玩具樂器</span>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li data-id="k">
? ? ? ? ? ? ? ?<span>食品/酒類/生鮮/特產(chǎn)</span>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li data-id="l">
? ? ? ? ? ? ? ?<span>醫(yī)藥保健</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="#">合資產(chǎn)品</a>
? ? ? ? ? ? ? ? ? ? ? ?<a href="#">國產(chǎn)產(chǎn)品</a>
? ? ? ? ? ? ? ? ? ? ? ?<a href="#">互聯(lián)網(wǎng)品牌</a>
? ? ? ? ? ? ? ? ? ?</dd>
? ? ? ? ? ? ? ?</dl>
? ? ? ? ? ? ? ?<dl>
? ? ? ? ? ? ? ? ? ?<dt>
? ? ? ? ? ? ? ? ? ? ? ?<a href="#">空調(diào)<i>></i></a>
? ? ? ? ? ? ? ? ? ?</dt>
? ? ? ? ? ? ? ? ? ?<dd>
? ? ? ? ? ? ? ? ? ? ? ?<a href="#">掛壁式空調(diào)</a>
? ? ? ? ? ? ? ? ? ? ? ?<a href="#">柜式空調(diào)</a>
? ? ? ? ? ? ? ? ? ? ? ?<a href="#">中央空調(diào)</a>
? ? ? ? ? ? ? ? ? ? ? ?<a href="#">空調(diào)配件</a>
? ? ? ? ? ? ? ? ? ?</dd>
? ? ? ? ? ? ? ?</dl>
? ? ? ? ? ? ? ?<dl>
? ? ? ? ? ? ? ? ? ?<dt>
? ? ? ? ? ? ? ? ? ? ? ?<a href="#">洗衣機<i>></i></a>
? ? ? ? ? ? ? ? ? ?</dt>
? ? ? ? ? ? ? ? ? ?<dd>
? ? ? ? ? ? ? ? ? ? ? ?<a href="#">滾筒洗衣機</a>
? ? ? ? ? ? ? ? ? ? ? ?<a href="#">洗烘一體機</a>
? ? ? ? ? ? ? ? ? ? ? ?<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>
? ? ? ? ? ? ? ? ? ? ? ?<a href="#">雙門</a>
? ? ? ? ? ? ? ? ? ? ? ?<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="#">170選號</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>
? ? ? ? ? ? ? ? ? ? ? ?<a href="#">數(shù)據(jù)線</a>
? ? ? ? ? ? ? ? ? ? ? ?<a href="#">充電器</a>
? ? ? ? ? ? ? ? ? ?</dd>
? ? ? ? ? ? ? ?</dl>
? ? ? ? ? ?</div>
? ? ? ?</div>
? ?</div>
? ?<script src="jquery-3.2.1.slim.min.js" type="text/javascript"></script>
? ?<script src="1.js" type="text/javascript"></script>
</body>
</html>

//css

.wrap{
? ?position: relative;
? ?width:200px;
? ?left:50px;
? ?top:50px;
}
ul{
? ?padding:15px 0;
? ?margin: 9px;
? ?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;
}
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,0.3);
? ?left:200px;
? ?top:0;
? ?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;
}
.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;
}

//js

/**
* Created by Administator on 2017/6/4.
*/
$(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=[];
? ?$('#test')
? ? ? ?.on('mouseenter',function(e){
? ? ? ?sub.removeClass('none');
? ? ? ?})
? ? ? ?.on('mouseleave',function(e){
? ? ? ? ? ?sub.addClass('none');
? ? ? ? ? ?if(activeRow){
? ? ? ? ? ? ? ?activeRow.removeClass('active');
? ? ? ? ? ? ? ?activeRow=null
? ? ? ? ? ?}

? ? ? ? ? ?if(activeMenu){
? ? ? ? ? ? ? ?activeMenu.addClass('none');
? ? ? ? ? ? ? ?activeMenu=null
? ? ? ? ? ?}
? ? ? ?})
? ? ? ?.on('nouseenter','li',function(e){
? ? ? ? ? ?if(!activeRow){
? ? ? ? ? ? ? ?activeRow=$(e.target).addClass('active');
? ? ? ? ? ? ? ?activeMenu=$('#'+activeRow.data('id'));
? ? ? ? ? ? ? ?activeMenu.removeClass('nine');
? ? ? ? ? ? ? ?return
? ? ? ? ? ?}else{
? ? ? ? ? ? ? ?if(timer){
? ? ? ? ? ? ? ? ? ?clearTimeout(timer)
? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ?timer=setTimeout(function () {
? ? ? ? ? ? ? ? ? ?if(mouseInSub){
? ? ? ? ? ? ? ? ? ? ? ?return
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?activeRow.removeClass('active');
? ? ? ? ? ? ? ? ? ?activeMenu.addClass('nine');
? ? ? ? ? ? ? ? ? ?activeRow.$(e.target);
? ? ? ? ? ? ? ? ? ?activeRow.addClass('active');
? ? ? ? ? ? ? ? ? ?activeMenu=$('#'+activeRow.data('id'));
? ? ? ? ? ? ? ? ? ?activeMenu.removeClass('none');
? ? ? ? ? ? ? ? ? ?timer=null
? ? ? ? ? ? ? ?},300);
? ? ? ? ? ?}
? ? ? ?})
});