实现二级菜单的显示于隐藏同时满足鼠标移入移出二级菜单的要求，谢谢大家？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级菜单的显示与隐藏</title>
<style>
ul{
margin:0;
padding: 0;
list-style: none;
}
li{
width: 100px;
height: 30px;
border:1px solid green;
text-align: center;
float: left;
margin:15px;
}
#nav2{
position: absolute;
top: 50px;
left: 50px;
}
#nav2 li{
display: none;
}
</style>
</head>
<body>
<ul id="nav1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul id="nav2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
var nav1=document.getElementById("nav1").getElementsByTagName("li");
var nav2=document.getElementById("nav2").getElementsByTagName("li");
for(var i=0;i<nav1.length;i++){
nav1[i].index=i
nav1[i].onmouseover=function(){
nav2[this.index].style.display="block";
}
nav1[i].onmouseout=function(){
var t=setTimeout( function(){nav2[this.index].style.display="none";},1000)
}
// nav2[this.index].onmouseover=function(){
// clearTimeout(t);
// nav2[this.index].style.display="block";
// }
// nav2[this.index].onmouseout=function(){
// nav2[this.index].style.display="none";
// }
}
</script>
</body>
</html>
Echo_Chien1回答
随时随地看视频慕课网APP
相关分类
JavaScript