首页 > 其他分享> > js练习延时消失的菜单

js练习延时消失的菜单

2021-07-30 23:31:36 作者：互联网

<!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标签，代码可能会比较简单

标签：style,菜单,aLi,aLink,li,定时器,延时,var,js
来源： https://blog.csdn.net/qq_53351515/article/details/119257157

js练习 延时消失的菜单

js练习延时消失的菜单