js练习延时消失的菜单

2021-07-30 23:31:36 阅读：184 来源： 互联网

标签：style 菜单 aLi aLink li 定时器延时 var js

<!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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js练习 延时消失的菜单

js练习延时消失的菜单