                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /展開(kāi)與收起效果

老師同學(xué)們好。能彈開(kāi)菜單，也能收回去，但是，再點(diǎn)擊就不行了。代碼哪里錯(cuò)了呢？

1.老師同學(xué)們好。愚下自作聰明，想給加上setInterval()，希望能夠讓隱藏的div緩緩彈出。目前能緩緩彈出，也能收回去，但是，再點(diǎn)擊就不行了。代碼哪里錯(cuò)了呢？

2.我就是不理解為何教程上用的是seTimeout()，這個(gè)東西不是定時(shí)執(zhí)行一次嗎？

<!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>無(wú)標(biāo)題文檔</title>
<style>
*{margin:0; padding:0;}
body{width:600px; margin:0 auto;}
#pn{background-color:#e8e8e8; width:600px; height:60px; font-size:14px; line-height:30px;}
#pn p{margin-left:10px;}
#hpn{ background-color:#e8e8e8; ?width:600px; display:none; height:0px; overflow:hidden; font-size:14px; line-height:30px;}
#hpn p{margin-left:10px;}
#button{width:590px; border-top: #666 5px solid; margin:0 auto;}
#button p{width:100px; height:30px; background-color:#666; text-align:center; margin:0 auto; line-height:30px; ?}
#button p a{color: #fff; text-decoration:none; font-size:12px;}
</style>
<script>
var h=0;
/*以下是判斷高度小于60的情況下，執(zhí)行高度每次+5，高度賦值給隱藏層css的height，同時(shí)隱藏層display變成block，按鈕文字變?yōu)椤掌稹粹oonclick屬性變?yōu)閎bc（）*/
function eee(){
if(h<60)
{
h=h+5;
document.getElementById('hpn').style.height=h+'px';
document.getElementById('hpn').style.display='block';
document.getElementById('strhref').innerHTML='收起-';
document.getElementById('strhref').setAttribute('onclick','bbc()');
}
else{return;}
}
//以下為，當(dāng)菜單展完成，再次點(diǎn)擊按鈕，#hpn隱藏，按鈕文字恢復(fù)變成‘更多選項(xiàng)’，
function bbc(){
document.getElementById('hpn').style.display='none';
document.getElementById('strhref').innerHTML='更多選項(xiàng)+';
document.getElementById('strhref').setAttribute('onclick','zhankai()');
}

function zhankai(){setInterval("eee()",100)}

</script>
</head>

<body>
<div id="pn">
<p>手機(jī)-商品篩選</p>
<p>網(wǎng)絡(luò)：移動(dòng)4G 聯(lián)通3G 電信3G</p>
</div>

<div id="hpn">
<p>價(jià)格：5000以上 4000-4999 3000-3999</p>
<p>特點(diǎn)：JDphone計(jì)劃 "0"元購(gòu)機(jī) 防水長(zhǎng)待機(jī) 1080p全高清屏</p>
</div>
<div id="button">
<p><a href="#" id="strhref" onclick="zhankai()">更多選項(xiàng)+</a></p>
</div>
</body>
</html>

Tang小溪

2016-07-21

源自：展開(kāi)與收起效果 3-2

關(guān)注問(wèn)題我要回答

764

操作

收起

2 回答

飛天意大利面神獸回答被采納 +3 積分
2016-07-23

			var?h?=?0;
			
			function?eee()?{

				if(h?<?60)?{
					h?=?h?+?5;
					document.getElementById('hpn').style.height?=?h?+?'px';
					document.getElementById('hpn').style.display?=?'block';

				}?else?{
					clearInterval(timer);
					document.getElementById('strhref').innerHTML?=?'收起-';
					document.getElementById('strhref').setAttribute('onclick',?'bbc()');
					return;
				}
			}

			function?bbc()?{
				h=0;
				document.getElementById('hpn').style.display?=?'none';
				document.getElementById('hpn').style.height?=?0;
				document.getElementById('strhref').innerHTML?=?'更多選項(xiàng)+';
				document.getElementById('strhref').setAttribute('onclick',?'zhankai()');
			}
			var?timer?=?null;

			function?zhankai()?{
				clearInterval(timer);
				timer?=?setInterval("eee()",?100);
			}

最重要的是 h 沒(méi)有在完成整個(gè)高度變成60的之后，變成初始值，也就是0，
所以你再次調(diào)用eee函數(shù)，那么結(jié)果就是60<60=false，跳過(guò)if內(nèi)容只能執(zhí)行else的步驟。
另外完成這個(gè)動(dòng)畫(huà)之后，記得要清除整個(gè)動(dòng)畫(huà)，不然h就會(huì)一直從0-60，60-0.