为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我将oSubNav.time 改成一个普通变量 timer就不行了

indow.onload=function(){

    var aLi=document.getElementsByTagName('li');

    for(var i=0; i<aLi.length; i++){

       aLi[i].onmouseover=function(){

            var oSubNav=this.getElementsByTagName('ul')[0];

            if(oSubNav){

            clearInterval(timer);

            var timer=setInterval(function(){

                    oSubNav.style.height=oSubNav.offsetHeight+16+"px";

                    if(oSubNav.offsetHeight>=120)

                    clearInterval(timer);

                },30)

             }

          }

        //鼠标离开菜单,二级菜单动画收缩起来。        

     aLi[i].onmouseout=function(){

            var oSubNav=this.getElementsByTagName('ul')[0];

            if(oSubNav){

            clearInterval(timer);

            var timer=setInterval(function(){

                    oSubNav.style.height=oSubNav.offsetHeight-16+"px";

                    if(oSubNav.offsetHeight<=0)

                    clearInterval(timer);

                },30)

             }

          }

        

    }

}


程序就出BUG了,鼠标滑到li标签,窗口也会弹回,一定要建立对象的属性来保存setInterval的返回值吗

正在回答

1 回答

oSubNav就是this.getElementsByTagName('ul')[0],oSubNav是遍历所有li,如果当前li下有ul,即当前的li是一级菜单,才继续执行后面的逻辑。为什么要把后面的计时器绑在this上呢?因为每个this也就是每个一级菜单有着一个共同的计时器。假设你迅速的进入、移出,再移入某个一级菜单,因为使用同一个定时器,移出时会清空移入的定时器,移入时清空移出的定时器,二级菜单不会卡壳。如果改成一个普通的变量timer,timer的作用域仅限于该次函数内部调用,移入和移出使用了不同的计时器,二级菜单的高度会不断的+12px和-12px,每次移入都产生了新的一个timer。或者你想创建一个全局的timer所有一级菜单共用,一级菜单同样会卡壳,不能单独的缩回。这样每个一级菜单共用的一个变量,把它放在this的属性上再方便不过了。

2 回复 有任何疑惑可以回复我~
#1

ZZXboy 提问者

非常感谢!
2016-04-28 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
导航条菜单的制作
  • 参与学习       123899    人
  • 解答问题       813    个

水平、垂直、圆角导航条菜单,让您的技术探索之路更高效

进入课程

为什么我将oSubNav.time 改成一个普通变量 timer就不行了

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信