1.一般的级联菜单，当我们鼠标滑动到一级菜单上的每一个li上时显示对应的二级菜单。可是这种传统的级联菜单有一个很差的用户体验：我们必须在这个li元素上平行的移动鼠标，才能将鼠标移动到对应的二级菜单中。如果在移动过程中移动到了其他的li元素下，将会显示其他的二级菜单了
2.改善这个用户体验的原理在于设置鼠标经过li元素时的时间片
3.实现代码:
//前端页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无延迟菜单</title> <!--My CSS Link--> <link rel="stylesheet" href="../CSS/menu.css" /> <!--Jquery JS Link--> <script src="../JS/jquery.min.js"></script> <!--My JS Link--> <script src="../JS/menu.js"></script> </head> <body> <!--一级菜单--> <div class="wrap"> <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> <li data-id="f"> <span>油卡/油卡/油卡</span> </li> </ul> </div> <!--隐藏的二级菜单--> <div class="sub none" id="a"> <div class="sub_content"> <dl> <dt> <a href="javascript:void(0);"><i>电视></i></a> </dt> <dd> <a href="javascript:void(0);">品牌1</a> <a href="">品牌2</a> <a href="">品牌3</a> <a href="">品牌4</a> </dd> </dl> </div> </div> <div class="sub none" style="top: 59px;" id="b"> <div class="sub_content"> <dl> <dt> <a href="javascript:void(0);"><i>电视></i></a> </dt> <dd> <a href="javascript:void(0);">品牌1</a> <a href="">品牌2</a> <a href="">品牌3</a> <a href="">品牌4</a> </dd> </dl> </div> </div> <div class="sub none" style="top: 89px;" id="c"> <div class="sub_content"> <dl> <dt> <a href="javascript:void(0);"><i>电视></i></a> </dt> <dd> <a href="javascript:void(0);">品牌1</a> <a href="">品牌2</a> <a href="">品牌3</a> <a href="">品牌4</a> </dd> </dl> </div> </div> <div class="sub none" style="top: 119px;" id="d"> <div class="sub_content"> <dl> <dt> <a href="javascript:void(0);"><i>电视></i></a> </dt> <dd> <a href="javascript:void(0);">品牌1</a> <a href="">品牌2</a> <a href="">品牌3</a> <a href="">品牌4</a> </dd> </dl> </div> </div> <div class="sub none" style="top: 149px;" id="e"> <div class="sub_content"> <dl> <dt> <a href="javascript:void(0);"><i>电视></i></a> </dt> <dd> <a href="javascript:void(0);">品牌1</a> <a href="">品牌2</a> <a href="">品牌3</a> <a href="">品牌4</a> </dd> </dl> </div> </div> <div class="sub none" style="top: 170px;" id="f"> <div class="sub_content"> <dl> <dt> <a href="javascript:void(0);"><i>电视></i></a> </dt> <dd> <a href="javascript:void(0);">品牌1</a> <a href="">品牌2</a> <a href="">品牌3</a> <a href="">品牌4</a> </dd> </dl> </div> </div> </body> </html> //CSS样式 @charset "utf-8"; /* CSS Document */ .wrap{ position:relative; width: 200px; left: 50px; top: 0px; } ul{ list-style-type: none; padding: 15px 0; margin: 9; background-color: #6c6669; color: $fff; border-right-width: 0; } ul li{ display: block; height: 30px; line-height:30px; padding-left: 12px; cursor: pointer; font-size: 14px; position: relative; } ul li:hover{ background-color: #CCC; color:#F33; } .none{ display:none; } .sub{ width: 600px; position:absolute; border: 1px solid grey; background: #f7f7f7; box-shadow: 2px 0 5px rgba(0,0,0,.3); left: 258px; top: 29px; //每次加30px; box-sizing: border-box; margin: 0; padding: 10px; } .sub .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核心代码 // JavaScript Document $(function(){ //鼠标经过子元素，显示对应的div var activediv = ""; var timer; var entersub = false; $.fn.mouseenterfun = function(){ //第一次进入一级菜单 if(activediv == ""){ //显示当前需要显示的div activediv = $(this).data('id'); $("#"+activediv).removeClass("none"); return ; } $li = $(this); //先隐藏之前显示出来的div timer = setTimeout(function(){ //如果进入了子菜单，则清除timer,实现无延迟菜单的关键 if(entersub == true){ clearTimeout(timer); return; } $("#"+activediv).addClass("none"); activediv = $li.data('id'); $("#"+activediv).removeClass("none"); timer = null; },100); }; $(".wrap").on("mouseenter","li",$.fn.mouseenterfun); //鼠标移出一级菜单则隐藏现在显示的二级菜单 $.fn.mouseleavefun = function(){ setTimeout(function(){ if(activediv != "" && entersub == false){ $("#"+activediv).addClass("none"); } },10); }; $(".wrap").mouseleave($.fn.mouseleavefun); //判断鼠标是否移入了二级菜单中,用于同activediv变量一起进行判断是否隐藏对应的activediv $(".sub").mouseenter(function(){ entersub = true; }).mouseleave(function(){ entersub = false; }); });