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

课程

/前端开发

/JavaScript

/形形色色的下拉菜单

subH没有效果

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

#nav{font-size:12px;font-weight:bold;list-style:none;overflow:auto;}

#nav li{float:left;margin-right:1px;}

#nav li a{line-height:20px;text-decoration:none;background:#CCCCCC;color:#333333;width:80px;text-align:center;display:block;}

#nav li ul{display:none;list-style:none;padding:0;position:relative;height:0;overflow:hidden;}

#nav li a:hover{color:#FFFFFF;}




</style>

</head>


<body>

<ul id="nav">

<li><a href="#">首页</a></li>

    <li><a href="#">课程大厅</a></li>

    <li><a href="#">学习中心+</a>

    <ul id="a">

        <li><a href="#">前端开发</a>

            <ul>

                        <li><a href="#">JavaScript</a></li>

                        <li><a href="#">jqery</a></li>

                        <li><a href="#">css</a></li>

        

       </ul>

                

            </li>

    <li><a href="#">时间开发</a></li>

            <li><a href="#">后天编程</a></li>

        

        </ul>

    

    

    </li>

    <li><a href="#">关于我们</a></li>


</ul>


<script>

var timer;

window.onload=function(){

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

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

lis[i].onmouseover=function(){

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

u.style.display='block';

AddH('a');

}

lis[i].onmouseout=function(){

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

SubH('a');

}



}

}



function AddH(id){

var ullist=document.getElementById(id);

setInterval(function(){

if(ullist.offsetHeight>=34){

return;

}else{

ullist.style.height=ullist.offsetHeight+1+'px';

}

},10);


}



function SubH(id){

var ullist=document.getElementById(id);

setInterval(function(){

if(ullist.offsetHeight>0){

ullist.style.height=ullist.offsetHeight-1+'px';


}else{

ullist.style.display='none';

return;

}

},10);


}

</script>


</body>

</html>

如题，addH可以展开，但是subH收不回去，调试也不知道错哪里

fel

2016-08-20

源自：形形色色的下拉菜单  6-3

关注问题 我要回答
677
操作
收起

正在回答

1 回答

BOBSDF
2016-09-02

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

<!--<script>

$(function(){

$("li").has('ul').mouseover(function(){

$(this).children("ul").css("display","block");

}).mouseout(function(){

$(this).children("ul").css("display","none");

})


$.support.leadingWhitespace//判断是否是ie6ie7ie8

});









</script>

<script type="text/javascript">

window.onload=function(){

var isIE=!!window.ActiveXObject;

var isIE6=isIE&&!window.XMLHttpRequest;

if(isIE6){

var Lis=document.getElementsByClassName("li");

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

Lis[i].onmouseover=function(){

var u=this.getElementsByTagName("ul")[0];

if(u !=undefined){

u.style.display="block";

}

}

}

}

}

</script>-->

<script type="text/javascript"  src="js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

/*$(document).ready(function(e) {

    $(".navmenu li").mousemove(function(){

$(this).find("ul").slideDown("1000");

});

$(".navmenu li").mouseleave(function(){

$(this).find("ul").slideUp("1000");

})

});*/ 


window.onload=function(){

function changeH(id,count){

 

var ulList=document.getElementById(id);

var h=ulList.offsetHeight;

h+=count;

if(count>0){

if(h<=42){

 h-=count;//这是重点

ulList.style.height=h+"px";

setTimeout("changeH('"+id+"',1)",10);

                  }

else{

return;

}

 

}

if(count<0){

if(h>0){

h+=count;

UlList.style.height=h+"px";

setTimeout("changeH('"+id+"',-1)",10);

alert("1");

}

else{

ulList.style.display="none";

return;

}

 

 

}

 

 

 

 

 

}

 

/* function AddH(id){

console.log("1");

var  ulList=document.getElementById(id);

var h=ulList.offsetHeight;

h+=1;

console.log("1");

if(h<=42){

ulList.style.height=h+"px";

setTimeout("AddH('"+id+"')",10);

}

function SubH(id){

}*/

 

var Lis=document.getElementsByTagName("li");

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

//

Lis[i].onmouseover=function(){

var u=this.getElementsByTagName("ul")[0];

u.style.display="block";

//if(u !=undefined){

changeH(u.id,1);

             //   }

                            }

//

Lis[i].onmouseleave=function(){

var u=this.getElementsByTagName("ul")[0];

//if(u !=undefined){

changeH(u.id,-1);

              //  }

                               }

//

                                }

 





}

</script>

<style type="text/css">

/*Ie6不支持hover 可以下载一个csshover.hte文件

body{

behavior:url(csshover.hte);

｝*/

.navmenu{

list-style:none;

font-size:12px;

font-weight:bold;

border-bottom: 8px  solid #dc4e1b;

overflow:auto;/*清除子元素的浮动影响*/

}

.navmenu li { 

float:left;

margin-right:1px;}

.navmenu li a{  line-height:20px;

text-decoration:none;

background-color:#ddd;

color:#666666;

display:block;

width:80px;

text-align:center;              

}

.navmenu li ul{

display:none;

list-style:none;

padding:0; /*下级菜单完美对应上级菜单*/

position:relative;

}

.navmenu  li ul{

width:80px;  /*定义宽度 竖向排列*/

}

.navmenu li ul li ul{

top:0px;

left:80px;

position:absolute;/*从二级菜单流中脱离出来, 否则即使出来也会占用原先的位置*/

}

.navmenu li a:hover{

background:url(images/banner02.jpg);

color:White;

}




</style>

</head>



<body>

<ul class="navmenu">

<li><a href="#"> 首页</a> </li>

<li><a href="#"> 课程大厅</a></li>

<li><a href="#">学习中心 + </a>

<ul id="s1">

<li><a href="#"> 前端课程+</a> 

<ul  id="s2">

<li><a href="#"> javascript</a> </li>

<li><a href="#"> css</a> </li>

<li><a href="#"> jquery</a> </li>

</ul>





</li>

<li><a href="#"> 手机开发</a> </li>

<li><a href="#"> 后台编程</a> </li>

</ul>

</li>

<li><a href="#"> 关于我们</a></li>

</ul>

</body>

</html>

我本来也是不行的  收回不行   我猜想了好久  

 h-=count;//这是重点

老师这里写的是加号  、

我把它改成减号就可以了


0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
形形色色的下拉菜单
  • 参与学习       106972    人
  • 解答问题       543    个

本教程从易到难，循循渐进，运用不同技术实现动态下拉菜单

进入课程

subH没有效果

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