第一個(gè)小demo
$(function(){
var qq = $('qq');
var title = $('title');
var timer = null;
qq.onmouseover = show;
qq.onmouseout = hide;
title.onmouseover = show;
title.onmouseout = hide;
function show(){
clearInterval( timer );
title.style.display = 'block';
}
function hide(){
timer = setTimeout(function(){
title.style.display = 'none';
}, 200);
}
});
完整實(shí)例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS橫向延時(shí)2級(jí)下拉菜單</title>
<style>
body{ font-size: 12px; color: #333;}
body, ul,h2{ margin:0;padding:0;}
li { list-style:none;}
a{ color: #333; text-decoration: none;}
a:hover{ color: #f00;}
#nav { width:100%; border:1px solid #000; margin-bottom:10px;}
#nav li{ display:inline-block; margin:10px 20px; font-size: 16px; font-weight: bold;}
.nav li { float:left; margin: 0 5px; font-size:12px;}
.nav { position:absolute; border:1px solid #666; padding: 5px; display:none;}
.n1 { left:0;}
.n2 { left:80px;}
.n3 { left:200px;}
</style>
</head>
<body>
<div class="menu">
<ul id="nav">
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">產(chǎn)品中心</a></li>
<li><a href="#">關(guān)于我們</a></li>
</ul>
<ul class="nav n1">
<li><a href="#">首頁(yè)二級(jí)菜單1</a></li>
<li><a href="#">首頁(yè)二級(jí)菜單2</a></li>
<li><a href="#">首頁(yè)二級(jí)菜單3</a></li>
</ul>
<ul class="nav n2">
<li><a href="#">產(chǎn)品中心二級(jí)菜單1</a></li>
<li><a href="#">產(chǎn)品中心二級(jí)菜單2</a></li>
<li><a href="#">產(chǎn)品中心二級(jí)菜單3</a></li>
<li><a href="#">產(chǎn)品中心二級(jí)菜單4</a></li>
</ul>
<ul class="nav n3">
<li><a href="#">關(guān)于我們二級(jí)菜單1</a></li>
<li><a href="#">關(guān)于我們二級(jí)菜單2</a></li>
</ul>
</div>
<script>
window.onload = function(){
var oUl = document.getElementById('nav');
var aLi = oUl.getElementsByTagName('li'); //獲取一級(jí)菜單
var aUl = document.getElementsByTagName('ul'); //獲取所有ul
var timer = null;
var that = '';
// 循環(huán)遍歷所有的一級(jí)菜單
for(var i = 0; i < aLi.length; i++){
// 這里加1的原因是第0個(gè)li所對(duì)應(yīng)的ul是第1個(gè)ul
aLi[i].index = i + 1;
// 鼠標(biāo)經(jīng)過(guò)，先關(guān)閉定時(shí)器蔚润，所有2級(jí)菜單隱藏，當(dāng)前2級(jí)菜單顯示
aLi[i].onmouseover = function(){
clearTimeout(timer);
// 這里設(shè)置i = 1也是和上面一樣，一一對(duì)應(yīng)
for(var i = 1; i< aUl.length; i++){
aUl[i].style.display = 'none';
}
aUl[this.index].style.display = 'block';
};
// 鼠標(biāo)移開時(shí)军援，先延時(shí)200毫秒绍些，然后將2級(jí)菜單隱藏
aLi[i].onmouseout = function(){
//將當(dāng)前索引值保存到that變量中
that = this.index;
timer = setTimeout(function(){
aUl[that].style.display = 'none';
},200);
};
}
// 循環(huán)遍歷所有的二級(jí)菜單【原理同上】
for(var i = 1; i < aUl.length; i++){
// 鼠標(biāo)經(jīng)過(guò)2級(jí)菜單可训，先清空定時(shí)器膘滨，當(dāng)前顯示
aUl[i].onmouseover = function(){
clearTimeout(timer);
this.style.display = 'block';
};
// 鼠標(biāo)移開2級(jí)菜單甘凭，延時(shí)200毫秒后再隱藏2級(jí)菜單
aUl[i].onmouseout = function(){
that = this;
timer = setTimeout(function(){
that.style.display = 'none';
},200);
}
}
};
</script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
