使用Jquery+repeater生成可以收缩的目录

前台的repeater的使用

 <asp:Repeater id="rptCategories" runat="server">
  <HeaderTemplate>
    <table id="table01" width="100%" border="0" cellspacing="0" cellpadding="0">
  </HeaderTemplate>
  <ItemTemplate>
    <tr class ="tr" >
      <td id="tdManiMenu"  >
        <div class ="MainMenu" >
         <asp:Label ID ="lblMenu"  runat ="server" Text ='<%# DataBinder.Eval(Container.DataItem, "标题") %>'  Font-Bold ="true"></asp:Label>
      </div>
     </td>
    </tr>
     <tr  class ="tr">
      <td id="tdMenuBorder">
       <div id="div" >
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
         <td>
          <div  class ="MenuBorder">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr>
         <td>
          <asp:Repeater id="rptProduct" runat="server">
           <ItemTemplate>
             <tr>
               <td style ="text-align :left; ">
                 <asp:LinkButton ID="lnkMenuDetail" runat="server" Font-Size ="small"  Font-Bold ="true"  Text ='<%# DataBinder.Eval(Container.DataItem, "标题") %>'
                    PostBackUrl ='<%# DataBinder.Eval(Container.DataItem, "src") %>'></asp:LinkButton>
                </td>
            </tr>
          </ItemTemplate>
         </asp:Repeater>
      </td>
      </tr>
     </table>
        </div>
         </td>
        </tr>
        <tr>
        <td>
          <div class ="MenuBottom" style ="height :38px"></div>
        </td>
        </tr>
        </table> 
      </div>  
     </td>
    </tr>
  </ItemTemplate>
  <FooterTemplate>
    </table>
  </FooterTemplate>
</asp:Repeater>

前台jquery

<script type="text/javascript">
$(document).ready(function(){
$("#table01 tbody td#tdManiMenu").each(function(index){
 $("#table01 tbody td#tdManiMenu:eq("+ index +")").click(function(){
   $("#table01 tbody div#div:eq("+ index +")").slideToggle("slow");
  });
 });
});

</script>

如果同时只能展开一个目录

<script type="text/javascript">
$(document).ready(function(){
var t01 = $("#table01 td#tdManiMenu").length;
var arr = new Array();
arr[0]=true;
for(i=1;i<t01;i++)
{
 $("#table01 tbody div#div:eq("+ i +")").slideToggle("slow");
arr[i]=false;
}
$("#table01 tbody td#tdManiMenu").each(function(index){
 $("#table01 tbody td#tdManiMenu:eq("+ index +")").click(function(){
    for(i=0;i<t01;i++)
    {
    if(arr[i]){   $("#table01 tbody div#div:eq("+ i +")").slideToggle("slow");arr[i]=false; }
    }
   $("#table01 tbody div#div:eq("+ index +")").slideToggle("slow");
   arr[index]=true;
  });
 });
});
</script>

后台vb

 Protected Sub rptCategories_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles rptCategories.ItemDataBound
        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
            Dim rptProduct As Repeater = e.Item.FindControl("rptProduct")
            Dim rowv As DataRowView = e.Item.DataItem
            Dim id As String = rowv("ID")
            Dim menudetailtb As DataTable = New DataTable()
            Dim selectsql As String = "SELECT * FROM MenuDetaile where Modul='" & id & "'"
            Try
                conn.Open()
                menudetailtb = conn.GetDataTable(selectsql)
                If Not menudetailtb Is Nothing And menudetailtb.Rows.Count > 0 Then
                    rptProduct.DataSource = menudetailtb
                    rptProduct.DataBind()
                End If
            Catch ex As Exception
            Finally
                conn.Close()
            End Try
        End If
    End Sub