                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /展开与收起效果

不引入JQ，我将这；两个效果结合起来，为什么只能实现一次，有大神可以帮忙看一下吗？

<!DOCTYPE html>

<html>

<head>

<title>展开与收起</title>

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>

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>

<p>

</p>

<p>

</p>

</div>

</p>

</body>

</html>

AINIforever

2016-11-20

源自：展开与收起效果 3-2

关注问题我要回答

1357

操作

收起

1 回答

团酱回答被采纳 +3 积分
2016-11-21

当你执行第二次的时候，time<0,且h>300，所以就不执行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>