假如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，上面是感觉比较通用的写法
手写的，没有测试
HTML点击按钮调用JS文件或者直接调用JS代码的方法。
如下参考：
1.将这段代码保存到一个文件中，如下图所示。
2.请注意，您可以使用任何文本工具创建js文件，但是在保存它时，您需要将其后缀为.js。
3.将版本js文件保存为index.js。如果我们需要使用index。js。我们只需要调用它，不需要写一个新的js文件。
4.在HTML的头部部分引入js文件，具体代码如下图所示。
5.引用是一个双标签，所以如果没有内容，就必须完全写入。
6.如果你的js是从外部导入的，你不能在中间写js代码。
7.如果需要，您需要重新声明脚本标记，并在标记中编写js代码，如下图所示。
8.javascriptjquery也是一样的规则，你必须在script标签中写代码。随着js文件的引入，你可以简单地在你想要的地方调用它。
大哥，你这点分，谁帮你找呀，这个很麻烦的。。。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"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//每隔多久循环一次
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,
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"><h5 onclick="toggle(this.parentNode)">点击我看"伸缩效果"</h5>
<table><tr><td>
<p>中国站长站</p>
<p>站长素材站</p>
<p>站长脚本站</p>
<p>站长下载</p>
</td></tr></table>
</div>
</body>
</html>
