我想实现一个按钮，点一下会有个div展开，再点一下那个div会收起，用javascript怎麼实现
这里是展开的代码，已经实现到了。但不知道怎麼写收起的代码。<styletype="text/css">#box1{background:#000;width:200px;...
这里是展开的代码，已经实现到了。但不知道怎麼写收起的代码。
<style type="text/css">
#box1{
background:#000;
width:200px;
margin-left:500px;
}
</style>
<script type="text/javascript">
var speed=8;
function move(){
var box=document.getElementById("box1");
var h=box.offsetHeight;
var pos=(400-h)/speed;
box.style.height=h+pos+"px";
var a=setTimeout("move()",10);
}
</script>
<div id="box1"></div>
<input type="button" value="button" onclick="move()"/> 展开
<style type="text/css">
#box1{
background:#000;
width:200px;
margin-left:500px;
}
</style>
<script type="text/javascript">
var speed=8;
function move(){
var box=document.getElementById("box1");
var h=box.offsetHeight;
var pos=(400-h)/speed;
box.style.height=h+pos+"px";
var a=setTimeout("move()",10);
}
</script>
<div id="box1"></div>
<input type="button" value="button" onclick="move()"/> 展开
2个回答
展开全部
<script type="text/javascript">
function ClickMenu(diving) {
//alert(diving);
if (document.getElementById(diving).style.display == "none") {
document.getElementById(diving).style.display = 'block';
}
else {
document.getElementById(diving).style.display = 'none';
}
}
</script>
<div class='banner2'><img src='images/plus.gif' height='15' width='15' border='0' alt='' /><a onclick=ClickMenu('TreeNode0')>分行管理</a></div>
<div id='TreeNode0' class='bannermid' style='display:none'>"
echo"<div class='banner3'><img src='images/erji1.jpg' height='20' width='36' border='0' alt='' /> <a href='media.php' target='Right'>宣传片</a></div>
<div class='banner3'><img src='images/erji1.jpg' height='20' width='36' border='0' alt='' /> <a href='picture.php' target='Right'>海报</a></div>
</div>
function ClickMenu(diving) {
//alert(diving);
if (document.getElementById(diving).style.display == "none") {
document.getElementById(diving).style.display = 'block';
}
else {
document.getElementById(diving).style.display = 'none';
}
}
</script>
<div class='banner2'><img src='images/plus.gif' height='15' width='15' border='0' alt='' /><a onclick=ClickMenu('TreeNode0')>分行管理</a></div>
<div id='TreeNode0' class='bannermid' style='display:none'>"
echo"<div class='banner3'><img src='images/erji1.jpg' height='20' width='36' border='0' alt='' /> <a href='media.php' target='Right'>宣传片</a></div>
<div class='banner3'><img src='images/erji1.jpg' height='20' width='36' border='0' alt='' /> <a href='picture.php' target='Right'>海报</a></div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<style type="text/css">
#box1{
background:#000;
width:200px;
margin-left:500px;
}
</style>
<script type="text/javascript">
var speed=8;
var status=0;//0 stands for closed, 1 stands for open;
function move()
{
var box=document.getElementById("box1");
if(status==0)
{
box.style.height="100px";
status=1;
}
else
{
box.style.height="0px";
status=0;
}
}
</script>
<div id="box1"></div>
<input type="button" value="button" onclick="move()"/>
</html>
上面是直接设置的height，没有动画效果，如果想做动画效果，可以考虑用jQuery中的hide和show函数，可以方便地对展开和关闭的速度进行设置。
<html>
<style type="text/css">
#box1{
background:#000;
width:200px;
margin-left:500px;
}
</style>
<script type="text/javascript">
var speed=8;
var status=0;//0 stands for closed, 1 stands for open;
function move()
{
var box=document.getElementById("box1");
if(status==0)
{
box.style.height="100px";
status=1;
}
else
{
box.style.height="0px";
status=0;
}
}
</script>
<div id="box1"></div>
<input type="button" value="button" onclick="move()"/>
</html>
上面是直接设置的height，没有动画效果，如果想做动画效果，可以考虑用jQuery中的hide和show函数，可以方便地对展开和关闭的速度进行设置。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
