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

求大神告知这两个定时器怎么分开搞啊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>动画菜单</title>

<style type="text/css">

* { margin: 0; padding: 0; font-size: 14px; }

a { color: #333; text-decoration: none }

ul{ list-style: none; }

.nav {height: 30px; border-bottom: 5px solid #F60; margin-left:50px; width:600px;}

.nav li { float: left; position:relative; height:30px; width:120px }

.nav li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }

.subNav{ position:absolute; top:30px; left:0; width:120px; height:0; overflow:hidden}

.subNav li a{ background:#ddd }

.subNav li a:hover{ background:#efefef}

</style>

<script>

window.onload=function(){

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

    

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

        timer=null;

aLi[i].onmouseover=function(){

            //鼠标经过一级菜单,二级菜单动画下拉显示出来

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

            

            clearInterval(timer);

            if(oSubNav.offsetHeight>=120){

                clearInterval(timer);

            }

            else{

                timer=setInterval(function(){

                    oSubNav.style.height=oSubNav.offsetHeight+10+'px';

                },30)

            }

}

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

aLi[i].onmouseout=function(){

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

            

            clearInterval(timer);

            if(oSubNav.offsetHeight<=0){

                clearInterval(timer);

            }

            else{

                timer=setInterval(function(){

                    oSubNav.style.height=oSubNav.offsetHeight-10+'px';

                },30) 

            }         

            

            

}

}

}

</script>

</head>

<body>

<ul class="nav">

    <li><a href="#">一级菜单</a>

    <ul class="subNav">

        <li><a href="#">二级菜单</a></li>

            <li><a href="#">二级菜单</a></li>

            <li><a href="#">二级菜单</a></li>

            <li><a href="#">二级菜单</a></li>

        </ul>

    </li>

    <li><a href="#">一级菜单</a>

    <ul class="subNav">

        <li><a href="#">二级菜单</a></li>

            <li><a href="#">二级菜单</a></li>

            <li><a href="#">二级菜单</a></li>

            <li><a href="#">二级菜单</a></li>

        </ul>

    </li>

    <li><a href="#">一级菜单</a></li>

    <li><a href="#">一级菜单</a></li>

    <li><a href="#">一级菜单</a></li>

</ul>

</body>

</html>


正在回答

1 回答

不要写timer,写this.time即可

clearInterval(this.time);

this.time = setInterval

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

苏慕然 提问者

不用进行定义吗,time是属性吗
2015-12-02 回复 有任何疑惑可以回复我~
#2

熊猫华仔 回复 苏慕然 提问者

这里的time并非一个变量,而是可以看作为是当前元素的一个自定义属性,不是该元素自带的属性,而是我们自己人为添加上去的,这个是可以直接赋值使用的不需要声明的哟~例如document.getElementById('txtBox').setAttribute("haahaha","123456");这样也是允许的
2015-12-02 回复 有任何疑惑可以回复我~
#3

苏慕然 提问者

非常感谢!
2015-12-03 回复 有任何疑惑可以回复我~

举报

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

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

进入课程

求大神告知这两个定时器怎么分开搞啊

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