"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<script type="text/javascript">
var mh = 30//最小高度
var step = 5//每次变化的px量
var ms = 10//每隔多久循环一次
var maxh//**这里加了一个变量用于记住原先的对象的高度
window.onload=function(){ //将其缩短，原长保留在maxh里
var o=document.getElementById('tger')
maxh=o.offsetHeight
//alert(o.offsetHeight)
o.style.height=mh+'px'
}
function toggle(o){
if (!o.tid)o.tid = "_" + Math.random() * 100
if (!window.toggler)window.toggler = {}
if (!window.toggler[o.tid]){
window.toggler[o.tid]={
obj:o,
//maxHeight:o.offsetHeight, //此处将最大长度换成如上定义的maxh
maxHeight:maxh,
minHeight:mh,
timer:null,
action:-1
}
}
//o.style.height = o.offsetHeight + "px"
if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer)
window.toggler[o.tid].action *= -1
window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms )
}
function anim(id){
var t = window.toggler[id]
var o = window.toggler[id].obj
if (t.action <0){
if (o.offsetHeight <= t.minHeight){
clearTimeout(t.timer)
return
}
}
else{
if (o.offsetHeight >= t.maxHeight){
clearTimeout(t.timer)
return
}
}
o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px"
window.toggler[id].timer = setTimeout("anim('"+id+"')",ms )
}
</script>
<style type="text/css">
div.xx{border:solid 1pxoverflow:hidden}
div.xx h5{border:solid 1pxborder-width:0 0 1pxpadding:0margin:0height:30pxline-height:30pxcursor:pointerbackground:#E7F5F8}
</style>
</head>
<body>
<div class="xx" id='tger'><h5 onclick="toggle(this.parentNode)">点击我看"伸缩效果"</h5> <!--为此div 块添加一个id-->
<table><tr><td>
<p>中国站长站</p>
<p>站长素材站</p>
<p>站长脚本站</p>
<p>站长下载</p>
</td></tr></table>
</div>
</body>
</html>
function showFile(){
if ($(".nr").is(":visible"))
{
$(".nr").hide()
} else{
$(".nr").show()
}
}
假如html代码如下
<div class="list"><h1><a class="open">点击展开</a></h1>
<div class="box">
<p>----------</p>
<a class="close">点击关闭</a>
</div>
</div>
jquery代码：
$(function(){$(".open").click(function(){
var i=$(".list .open").index($(this))//获取点击open在页面中open类的序列
if($("#show").length>0)//判断是否存在显示元素id show
{
if($(".list .box:eq("+i+")").attr("id")!="show")//判断当前的box是否已显示
{
$("#show").attr("id","")
}
}
$(".list .box:eq("+i+")").attr("id","show")
})
$(".close").click(function(){
var i=$(".list .close").index($(this))
$(".list .box:eq("+i+")").attr("id","")
})
})
这样对应的css类似如下
.box{display:none}#show{display:block}
.box默认隐藏 被附加id为show后就显示
因为你的列表内容应该是数据绑定生成的，可以定义相同class，上面是感觉比较通用的写法
手写的，没有测试
