js练习 延时消失的菜单
2021/7/30 23:37:39
本文主要是介绍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标签,代码可能会比较简单
这篇关于js练习 延时消失的菜单的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略