效果如下:
图一:
图二:
图三:
实现代码具体如下:(真接复制便可使用)
<
html
>
< head >
< title > aa </ title >
</ head >
< body >
< input id ="Button1" type ="button" value ="展开" onclick ="return Button1_onclick()" />
< input id ="Button2" type ="button" value ="关闭" onclick ="return Button2_onclick()" />
< div id ="mydiv" style ="width: 300px; height: 1px; border-right: #ff3300 1px dotted;
border-top: #ff3300 1px dotted; border-left: #ff3300 1px dotted; border-bottom: #ff3300 1px dotted;
background-color: #cccc66; overflow: hidden;" >
< br />
内容、内容、内容、内容、内容、内容、内容、内容、内容、
< br />
内容、内容、内容、内容、内容、内容、内容、内容、内容、
< br />
内容、内容、内容、内容、内容、内容、内容、内容、内容、
< br />
</ div >
< span id ="lab" ></ span >
</ body >
</ html >
< script language ="javascript" type ="text/javascript" >
// <!CDATA[
var h = 0 ;
var obj;
function Button1_onclick() {
if (h >= 200 )
{
h = 200 ;
obj.style.height = 200 ;
return ;
}
obj = document.getElementById( " mydiv " );
h = h + 1 ;
obj.style.height = h;
document.getElementById( " lab " ).innerHTML = " 图层高度: " + h;
setTimeout( " Button1_onclick() " , 10 );
}
function Button2_onclick() {
if (h <= 1 )
{
h = 0 ;
return ;
}
obj = document.getElementById( " mydiv " );
h = h - 1 ;
if (h <= 1 )
{
h = 1
}
obj.style.height = h;
document.getElementById( " lab " ).innerHTML = " 图层高度: " + h;
setTimeout( " Button2_onclick() " , 10 );
}
// ]]>
</ script >
< head >
< title > aa </ title >
</ head >
< body >
< input id ="Button1" type ="button" value ="展开" onclick ="return Button1_onclick()" />
< input id ="Button2" type ="button" value ="关闭" onclick ="return Button2_onclick()" />
< div id ="mydiv" style ="width: 300px; height: 1px; border-right: #ff3300 1px dotted;
border-top: #ff3300 1px dotted; border-left: #ff3300 1px dotted; border-bottom: #ff3300 1px dotted;
background-color: #cccc66; overflow: hidden;" >
< br />
内容、内容、内容、内容、内容、内容、内容、内容、内容、
< br />
内容、内容、内容、内容、内容、内容、内容、内容、内容、
< br />
内容、内容、内容、内容、内容、内容、内容、内容、内容、
< br />
</ div >
< span id ="lab" ></ span >
</ body >
</ html >
< script language ="javascript" type ="text/javascript" >
// <!CDATA[
var h = 0 ;
var obj;
function Button1_onclick() {
if (h >= 200 )
{
h = 200 ;
obj.style.height = 200 ;
return ;
}
obj = document.getElementById( " mydiv " );
h = h + 1 ;
obj.style.height = h;
document.getElementById( " lab " ).innerHTML = " 图层高度: " + h;
setTimeout( " Button1_onclick() " , 10 );
}
function Button2_onclick() {
if (h <= 1 )
{
h = 0 ;
return ;
}
obj = document.getElementById( " mydiv " );
h = h - 1 ;
if (h <= 1 )
{
h = 1
}
obj.style.height = h;
document.getElementById( " lab " ).innerHTML = " 图层高度: " + h;
setTimeout( " Button2_onclick() " , 10 );
}
// ]]>
</ script >
注意:
一、div 样式中的 overflow: hidden; 一定要有。
二、div 样式中的 height 不能小于 1,也就是说不能设为0 否则便会变成自动适应高度