<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
#content {
width:400px;
height:200px;
border:1px solid #000000;
margin:200px auto;
position: relative;
}
#menu {
width:300px;
height:50px;
border-radius: 10px;
background-color: cornflowerblue;
position: absolute;
left:50px;
top:50px;
}
#menu li{
list-style: none;
padding: 5px;
border-radius: 10px;
float:left;
margin-top:10px;
margin-left:10px;
cursor: pointer;
}
a {
display: inline-block;
width:100px;
height:30px;
background-color: cadetblue;
border-radius: 10px;
position: absolute;
top:110px;
border: 1px solid #000;
display: none;
}
#one {
left:30px;
}
#two {
left:90px;
}
#three {
left:170px
}
#four {
left:240px;
}
</style>
</head>
<body>
<div id="content">
<div id="menu">
<ul id="lis">
<li>首页</li>
<li>关于我们</li>
<li>我的</li>
<li>博客</li>
</ul>
</div>
<a id="one"></a>
<a id="two"></a>
<a id="three"></a>
<a id="four"></a>
</div>
</body>
<script>
var aLi=document.getElementsByTagName('li')
var aLink=document.getElementsByTagName('a')
var timer=null
function show(n){
for (var j=0;j<aLi.length;j++){
clearTimeout(timer)
}
aLink[n].style.display='block'
aLi[n].style.backgroundColor='chocolate'
}
for(var i=0;i<aLi.length;i++){
aLi[i].index=i
aLi[i].onmouseover=function(){
for (var j=0;j<aLi.length;j++){
aLink[j].style.display='none'
aLi[j].style.backgroundColor='cornflowerblue'
}
show(this.index,aLink)
}
aLi[i].onmouseout=function(){
var this_=this
timer=setTimeout(function(){
aLink[this_.index].style.display='none'
aLi[this_.index].style.backgroundColor='cornflowerblue'
},400)
}
aLink[i].num=i
aLink[i].onmouseover=function(){
show(this.num,aLi)
}
aLink[i].onmouseout=function(){
var this_=this
timer=setTimeout(function(){
aLink[this_.num].style.display='none'
aLi[this_.num].style.backgroundColor='cornflowerblue'
},400)
}
}
</script>
</html>
要求
①一级菜单二级菜单是同一级，而不是二级菜单是一级菜单的子级
②鼠标移到一级菜单的li，二级菜单的a出现，移开过会儿消失
鼠标移到a上时，a和li的效果不消失
③鼠标在li之间移动时，上一个延时消失的定时器清除，只显示这个li的效果
思路
鼠标移入li和a显示效果，移开时添加定时器让二级菜单延时消失
且移入li和a时，清除所有定时器
写的过程中出现的问题
问题①
想让这四个循环，移入li时加自定义属性，移入a时再给aLink加自定义属性
问题②
因为鼠标移开添加定时器，里面有函数，所以this没法用。
解决方法：var this_=this
问题③
因为思路不清晰，把li和a的定时器分开命名了，导致少清除了定时器，出现了bug。
解决：用一个定时器，鼠标移入清除所有定时器
这个代码还是有点复杂，如果用JS添加li和a标签，代码可能会比较简单