分类DIV收缩效果-DataList嵌套

<script type="text/javascript">

     function changeDivDown(obj){//此为向下展开div的方法 

        var objHidMaxH="hidMaxH"+obj;

        var objTLDiv="TLDiv"+obj;            

         var d = document.getElementById(objTLDiv);//"TLDiv"         

              var h = d.offsetHeight;    //当前DIV高度

              var maxh=document.getElementById(objHidMaxH).value;  

              function dmove(){                             

                   h+=5;//展开的速度

                   if(h>=maxh){

                       d.style.height=maxh+"px";

                       clearInterval(iIntervalId);

                   }else{

                       d.style.display='block';

                       d.style.height=h+'px';

                   }

              }

              iIntervalId=setInterval(dmove,2);//定时调用方法

         }

         function changeDivUp(obj){//此为div向上隐藏的方法

             var objTLDiv="TLDiv"+obj;          

         var d = document.getElementById(objTLDiv);//"TLDiv"

              var h = d.offsetHeight;

              //var maxh=250;

              function dmove(){

                   h-=5;//隐藏的速度

                   if(h<=0){

                       d.style.display='block';

                           

                       clearInterval(iIntervalId);

                   }else{

                       d.style.height=h+'px';

                   }

              }

              iIntervalId=setInterval(dmove,2);//定时调用方法

         }

        

         function changeDiv(objIndex)

         {

             var objHidFolderImg="hidFolderImg"+objIndex;

             var objImgFolder="imgFolder"+objIndex;

             if(1==document.getElementById(objHidFolderImg).value) 

             {

                document.getElementById(objImgFolder).src ="images/folder.gif";

                document.getElementById(objHidFolderImg).value="0";

                changeDivUp(objIndex);

             } 

             else

             {

                 document.getElementById(objImgFolder).src ="images/icon_open.jpg";

                 document.getElementById(objHidFolderImg).value="1";

                 changeDivDown(objIndex);

             }   

         }

</script>

 

<asp:DataList ID="dlList" runat="server" RepeatColumns="2" Width="100%" ItemStyle-VerticalAlign="Top">

                        <ItemTemplate>

                            <input type="hidden" id="hidFolderImg<%# Container.ItemIndex+1 %>" value="1" />

                            <img src="images/icon_open.jpg" width="16" height="16" id="imgFolder<%# Container.ItemIndex+1 %>" style="cursor:pointer;" onclick="changeDiv('<%# Container.ItemIndex+1 %>')" />

                            <span Style="font-size: 15px;color: black; font-weight: bold;cursor:pointer;" onclick="changeDiv('<%# Container.ItemIndex+1 %>')"><%# Eval("Type_Name") %></span>

                            <div id="TLDiv<%# Container.ItemIndex+1 %>" style="overflow: hidden;">

                                <asp:DataList ID="dlList2" runat="server" DataSource='<%# (Container.DataItem as System.Data.DataRowView).Row.GetChildRows("myRelation") %>'

                                    OnUpdateCommand="dlList2_UpdateCommand">

                                    <ItemTemplate>

                                        &nbsp;&nbsp;

                                        <img src="images/notes.gif" width="16" height="16" alt="" />

                                        <asp:LinkButton ID="lbtnProName" runat="server" Text='<%# (Container.DataItem as System.Data.DataRow)["Pro_Name"] %> '

                                            CommandName="Update" CommandArgument='<%# (Container.DataItem as System.Data.DataRow)["PRO_ID"] %>'

                                            ToolTip='<%# "收费部门：" + (Container.DataItem as System.Data.DataRow)["DEP_NAME"] + "，年度：" + (Container.DataItem as System.Data.DataRow)["PRO_YEAR"] + "，应缴金额：" + (Container.DataItem as System.Data.DataRow)["PRO_AMT"] + PageComm.ShowCurr((Container.DataItem as System.Data.DataRow)["Cr_Code"].ToString()) + "，有效周期：" + Convert.ToDateTime((Container.DataItem as System.Data.DataRow)["PRO_PRETIME"]).ToString("yyyy-MM-dd") + "至" + Convert.ToDateTime((Container.DataItem as System.Data.DataRow)["PRO_ENDTIME"]).ToString("yyyy-MM-dd")%>'>

                                        </asp:LinkButton>

                                    </ItemTemplate>

                                    <FooterTemplate>

                                        <input type="hidden" id="HidMaxH<%# ((DataListItem)((DataListItem)Container).Parent.Parent).ItemIndex+1 %>"

                                            value="<%# ((DataList)Container.Parent).Items.Count*30 %>" />

                                    </FooterTemplate>

                                </asp:DataList>

                            </div>

                        </ItemTemplate>

                        <ItemStyle Width="50%" HorizontalAlign="Left" Height="30px" />

                    </ asp : DataList >