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:;
}
ul,li{list-style: none;}
*{padding:;margin:;}
.clear-fix:after{
content: ".";
clear: both;
display: block;
font-size:;
height:;
visibility: hidden;
}
.box{
position: absolute;
top:;
left:;
width: 100%;
height: 60px;
z-index:;
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:;
/*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:;
}
ul,li{list-style: none;}
*{padding:;margin:;}
.clear-fix:after{
content: ".";
clear: both;
display: block;
font-size:;
height:;
visibility: hidden;
}
.box{
position: absolute;
top:;
left:;
width: 100%;
height: 60px;
z-index:;
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:;
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"});
}
});
})