很简单的内容,不过自己初次写,也经历了一些摸索的时间,代码如下,需要此功能的朋友可以参考下, 点击标题,展开后面的内容,每次只能查看一条记录的详细内容,点其他标题之前展开的内容自动收缩,很简单. <%@ Page Language="C#" AutoEventWireup="true" Codebehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>点击标题收缩展开</title> <mce:script type="text/jscript"><!-- function HiddenOrShow(cur) { var table=document.getElementById("table"); var tr=table.getElementsByTagName ("tr"); for(var i=0;i<tr.length ;i++) { if(tr[i] == cur.nextSibling) { if(tr[i].style .display =='block') { tr[i].style.display ='none'; } else { tr[i].style.display ='block' } } else if(tr[i].id=='detail') { tr[i].style .display ='none'; } } } // --></mce:script> </head> <body> <form id="form1" runat="server"> <div> <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> <table id="table"> <tr> <td> 测试 </td> </tr> </HeaderTemplate> <ItemTemplate> <tr runat="server" οnclick="HiddenOrShow(this);"> <td> 标题 </td> </tr> <tr id="detail" style="display: none;" mce_style="display: none;"> <td> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> </div> </form> </body> </html>