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>無標(biāo)題文檔</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="#">學(xué)習(xí)中心+</a>
? ? <ul id="a">
? ? ? ? <li><a href="#">前端開發(fā)</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="#">時間開發(fā)</a></li>
? ? ? ? ? ? <li><a href="#">后天編程</a></li>
? ? ? ??
? ? ? ? </ul>
? ??
? ??
? ? </li>
? ? <li><a href="#">關(guān)于我們</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收不回去，調(diào)試也不知道錯哪里
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>無標(biāo)題文檔</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; /*下級菜單完美對應(yīng)上級菜單*/
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="#">學(xué)習(xí)中心 + </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="#"> 手機開發(fā)</a> </li>
<li><a href="#"> 后臺編程</a> </li>
</ul>
</li>
<li><a href="#"> 關(guān)于我們</a></li>
</ul>
</body>
</html>
我本來也是不行的 ?收回不行 ? 我猜想了好久 ?
?h-=count;//這是重點
老師這里寫的是加號 ?、
我把它改成減號就可以了