不引入JQ，我將這；兩個效果結(jié)合起來，為什么只能實現(xiàn)一次，有大神可以幫忙看一下嗎？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>展開與收起</title>
<style type="text/css">
body{
padding: 0px;
margin: 0px;
}
#pn{
background:#e8e8e8;
width: 600px;
display: block;
margin: 0px;
padding: 5px;
font-size: 9pt;
height: 70px;
}
.slide{
margin: 0px;
padding: 0px;
width: 600px;
border-top:solid 4px gray;
}
.btn-slide{
background:gray;
width: 120px;
height: 30px;
text-align: center;
margin: 0 auto;
display: block;
color: #fff;
text-decoration: none;
padding: 10px 0 0 0 ;
}
</style>
<script type="text/javascript">
? ?var h = 70;
? ? ? ? function showDiv() {
? ? ? ? var time = 300;
? ? ? ? ? ??
? ? ? ? document.getElementById("Href").innerHTML = "收起";
document.getElementById("Href").href = "javascript:hideDiv()";
? ? ? ? ? ? if (time > 0) {
? ? ? ? ? ? ? ? time--;
? ? ? ? ? ? ? ? h = h + 5;
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? ? ? if (h >= 300) ?//高度?
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? document.getElementById("pn").style.height = h + "px";
? ? ? ? ? ? }
? ? ? ? ? ? setTimeout("showDiv()", 30);
? ? ? ? ? ? }
? ? ? ? var N = 300; //高度?
? ? ? ? function hideDiv() {
? ? ? ? var T = 300;
? ? ? ? document.getElementById("Href").innerHTML = "更多選項";
document.getElementById("Href").href = "javascript:showDiv()";
? ? ? ? ? ? if (T > 0) {
? ? ? ? ? ? ? ? T--;
? ? ? ? ? ? ? ? N = N - 5;
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? ? ? if (N <= 70) {
? ? ? ? ? ? ? ? document.getElementById("pn").style.display = "block";
? ? ? ? ? ? ? ? //document.getElementById("pn").style.height = "30px";
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? document.getElementById("pn").style.height = N + "px";
? ? ? ? ? ? }
? ? ? ? ? ? setTimeout("hideDiv()", 30);
? ? ? ? ? ? }
</script>
</head>
<body>
<div id="pn">
<p>1</p>
<p>2</p>
<div id="hpn" style="display: none;">
<p>
3
</p>
<p>
4
</p>
</div>
</div>
<p class="slide">
<a href="javascript:showDiv();" id="Href" class="btn-slide">更多選項</a>
</p>
</body>
</html>
2016-11-21
當(dāng)你執(zhí)行第二次的時候，time<0,且h>300，所以就不執(zhí)行if里面的了。你可以這樣寫：
<!DOCTYPE?html> <html> <head> <meta?charset="utf-8"> <title>展開與收起</title> <style?type="text/css"> body{ padding:?0px; margin:?0px; } #pn{ background:#e8e8e8; width:?600px; display:?block; margin:?0px; padding:?5px; font-size:?9pt; height:?60px; overflow:?hidden; } .slide{ margin:?0px; padding:?0px; width:?600px; border-top:solid?4px?gray; } .btn-slide{ background:gray; width:?120px; height:?30px; text-align:?center; margin:?0?auto; display:?block; color:?#fff; text-decoration:?none; padding:?10px?0?0?0?; } </style> <script?type="text/javascript"> ???var?h?=?60; ???function?addH()?{ ???????if(h?<?120){ ???????????h?+=?5; ???????????document.getElementById('pn').style.height?=?h?+?'px'; ???????}else{ ???????????var?btn?=?document.getElementById('Href'); ???????????btn.href?=?'javascript:subH();'; ???????????btn.innerText?=?'收起'; ???????????return; ???????} ???????setTimeout("addH()",30); ??????? ???} ???function?subH()?{ ???????if(h?>?60){ ???????????h?-=?5; ???????????document.getElementById('pn').style.height?=?h?+?'px'; ???????}else{ ???????????var?btn?=?document.getElementById('Href'); ???????????btn.href?=?'javascript:addH();'; ???????????btn.innerText?=?'更多選項'; ???????????return; ???????} ???????setTimeout("subH()",30); ??????? ???} </script> </head> <body> <div?id="pn"> <p>1</p> <p>2</p> <p> 3 </p> <p> 4 </p> </div> <p?class="slide"> <a?href="javascript:addH();"?id="Href"?class="btn-slide">更多選項</a> </p> </body> </html>