两种思想实现基于jquery的延时导航菜单，可做延时触发器！
1. 函数式
html如下：
<div class="box"> <ul class="clear-fix"> <li class="outer"> <a href="#" class="nav">index</a> <ul class="inter-box clear-fix"> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> </ul> </li> <li class="outer"> <a href="#" class="nav">index1</a> <ul class="inter-box clear-fix"> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> </ul> </li> <li class="outer"> <a href="#" class="nav">index2</a> <ul class="inter-box clear-fix"> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> </ul> </li> <li class="outer"> <a href="#" class="nav">index3</a> <ul class="inter-box clear-fix"> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> </ul> </li> </ul> </div>
css如下：
body{ position: relative; z-index: 1; } ul,li{list-style: none;} *{padding: 0;margin: 0;} .clear-fix:after{ content: "."; clear: both; display: block; font-size: 0; height: 0; visibility: hidden; } .box{ position: absolute; top: 0; left: 0; width: 100%; height: 60px; z-index: 100; text-align: center; background: #ccc; } .outer{ float: left; line-height: 60px; padding: 0 15px; position: relative; /*z-index: -5;*/ } .inter-box{ position: absolute; width: 100%; top: 60px; left: 0; /*display: none;*/ height: 0px; overflow: hidden; -webkit-transition: opacity linear 0.2s 1s; -o-transition: opacity linear 0.2s 1s; transition: opacity linear 0.2s 1s; } .nav{ display: block; width: 100%; height: 100%; } .inter-box li{ background: #dfdfdf; line-height: 30px; }
js如下，需引入jquery：
var timer=initTimer(); $(".nav").each(function(i,ele){ $(ele).attr("index",i); $(ele).mouseenter(function(){ var _this=$(this).attr("index") show(_this); }) $(ele).mouseleave(function(){ var _this=$(this).attr("index"); hide(_this); }) }) $(".inter-box").each(function(i,ele){ $(ele).attr("index",i); $(ele).mouseenter(function(){ console.log(111) var _this=$(this).attr("index") show(_this); }) $(ele).mouseleave(function(){ var _this=$(this).attr("index"); hide(_this); }) }) function initTimer(){ var timer={}; $(".nav").each(function(i,ele){ timer[i]=null; }); return timer; } function show(nowIndex){ clearTimeout(timer[nowIndex]); $(".inter-box").eq(nowIndex).animate({"height":"300px"}); } function hide(nowIndex){ timer[nowIndex]=setTimeout(function(){ $(".inter-box").eq(nowIndex).animate({"height":"0px"}); },200) }
2. 面向对象
html如下：
<div class="box"> <ul class="clear-fix"> <li class="outer"> <a href="#" class="nav">index</a> <ul class="inter-box clear-fix"> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> </ul> </li> <li class="outer"> <a href="#" class="nav">index1</a> <ul class="inter-box clear-fix"> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> </ul> </li> <li class="outer"> <a href="#" class="nav">index2</a> <ul class="inter-box clear-fix"> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> </ul> </li> <li class="outer"> <a href="#" class="nav">index3</a> <ul class="inter-box clear-fix"> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> <li><a href="#">inter1</a></li> </ul> </li> </ul> </div>
css如下：
body{ position: relative; z-index: 1; } ul,li{list-style: none;} *{padding: 0;margin: 0;} .clear-fix:after{ content: "."; clear: both; display: block; font-size: 0; height: 0; visibility: hidden; } .box{ position: absolute; top: 0; left: 0; width: 100%; height: 60px; z-index: 100; text-align: center; background: #ccc; } .outer{ float: left; line-height: 60px; padding: 0 15px; position: relative; /*z-index: -5;*/ } .inter-box{ position: absolute; width: 100%; top: 60px; left: 0; height: 0px; overflow: hidden; -webkit-transition: opacity linear 0.2s 1s; -o-transition: opacity linear 0.2s 1s; transition: opacity linear 0.2s 1s; } .inter-box li{ background: #dfdfdf; line-height: 30px; } .nav{ display: block; width:100%; height: 100%; }
js如下：
function delayController(obj){ var _this=this; this.set={ btn:$(".nav").eq(0), box:$(".box").eq(0), delayTime:200, showFn:function(_this){}, hideFn:function(_this){} } $.extend(this.set,obj); this.timer=null; this.timer2=null; this.set.btn.mouseenter(function(){ show(); }) this.set.btn.mouseleave(function(){ hide(); }) this.set.box.mouseenter(function(){ show(); }) this.set.box.mouseleave(function(){ hide(); }) function show(){ clearTimeout(_this.timer); _this.timer2=setTimeout(function(){ _this.set.showFn(_this); },_this.set.delayTime) } function hide(){ clearTimeout(_this.timer2); _this.timer=setTimeout(function(){ _this.set.hideFn(_this); },_this.set.delayTime) } } //调用 $(".nav").each(function(i,ele){ new delayController({ btn:$(".nav").eq(i), box:$(".inter-box").eq(i), showFn:function(_this){ _this.set.box.animate({"height":"200px"}); }, hideFn:function(_this){ _this.set.box.animate({"height":"0px"}); } }); })
