我用VS.net2005和javascript 在MastPage做动态的折叠导航时遇到了困难,我在左侧用一个DataList里面放一个lable和一个html 的image,当数据源发生改变时,DataList能动态的的加载数据,然后在lable中显示出来,点lable所在table时,导航也能折叠展开,我想在当点击想要的结点时,对应行的image改为展开图标,问题是image空间的Url的改变只改变数据源的第一行image 的图标,当点击Datalist的第二行数据时,image图标不能改变,改变的还是第一行数据的图标,javascript实现主要在function showsubmenu(whichEl,j)方法,代码如下:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MPMain.master.cs" Inherits="MPMain" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %><!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 id="Head1" runat="server">
    <title>无标题页</title>
    <link href="App_Themes/css-Master.css" type="text/css" rel="Stylesheet"/>
    <script type="text/javascript" src="../../Scripts/JScript.js"></script>
    <link href="App_Themes/StyleSheet.css" rel="stylesheet" type="text/css" />
    <link href="App_Themes/Default/Style.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript">    function showsubmenu(whichEl,j)
        {
            var obj;
            obj = document.getElementById("htmlImage1");
            if (whichEl.style.display == "none")
            {
                obj.src = "App_Themes/Default/Images/collapse.jpg";
                whichEl.style.display ='block';
            }
            else //collapse.jpg  expand.jpg
            {
                obj.src = "App_Themes/Default/Images/expand.jpg";
                whichEl.style.display ='none';
            }
            var i=0;
            var m=0;
            for( i;i<j;i++)
            {
                var id='divSub'+m;
              
                while(!document.getElementById(id))
                {  
                   m++; 
                    
                   id='divSub'+m;
                   
                }
               if(id!=whichEl.id)
               {
                   document.getElementById(id).style.display ='none';
               }
               m++; 
            }
            
        }
      
</head>
<body bgcolor="aliceblue">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="36000">
        </asp:ScriptManager>
        <asp:Label ID="lbldivSub" runat="server" style="display: none"></asp:Label>&nbsp;
        <input id="htmlText1" type="text" style ="display: none"/><br />
        <div style="margin: auto; width: 977px; left: 10px; position: relative; top: 0px;">
          <div>
                <table cellspacing="0" style="width: 977px; position: relative; top: 0px; left: 0px;" tabindex="0">
                    <tr>
                        <td class="Co" rowspan="2" bgcolor="#f5f5f5">
                            <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/ZTE/中兴2.jpg" Height="30px" Width="116px" /></td>
                        <td class="title" style="width: 800px; height: 56px">
                            <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/MasterPage/复件 sky.JPG" />
                        </td>
                    </tr>
                    <tr>
                        <td class="menu" bgcolor="whitesmoke" rowspan="2">
                            <asp:DataList ID="dl1" runat="server" RepeatDirection="Horizontal">
                                <ItemTemplate>
                                   &nbsp;
                                    <asp:LinkButton ID="lbFirstItem" runat="server" CausesValidation="False" Font-Size="14px"
                                        ForeColor="Black" Height="100%" CommandArgument='<%# Eval("FirstItemID") %>' OnCommand="lbFirstItem_Command" Text='<%# Eval("FirstItemName") %>'></asp:LinkButton> |
                                </ItemTemplate>
                            </asp:DataList>&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#f5f5f5" class="Co" rowspan="1">
                        </td>
                    </tr>
                    <tr>
                        <td align="right" class="clew" style="height: 35px; text-align: left">
                            <asp:Label ID="lblUserName" runat="server" EnableTheming="True" Width="163px"></asp:Label></td>
                        <td align="right" class="clew" style="height: 35px" valign="bottom">
                            &nbsp; &nbsp;
                        </td>
                    </tr>
                </table>
            </div>
            <div>
                <table cellspacing="0" style="width: 100%">
                    <tr>
                        <td id="leftTD" align="left" style="display: block; width: 152px;
                            text-align: center; height: 602px;" valign="top" bgcolor="ghostwhite">
                            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                                <ContentTemplate>
                            <asp:DataList ID="dl2" runat="server" BorderWidth="0px" CellPadding="0" RepeatColumns="1" cellspacing="0" HorizontalAlign="Center" OnItemDataBound="dl2_ItemDataBound">
                                <ItemTemplate>
                                    <table cellpadding="0" cellspacing="0" style="width: 100%; height: 80%">
                                        <tr>
                                            <td onclick="showsubmenu(<%# "divSub"+Eval("SortOrder")%>,'<%#Eval("SecondItemNum")%>')" style="background-color:#d8e5eb; height: 23px; text-align: center;width:229px;vertical-align:middle;width:150px;" class="lableexpand">
                                                &nbsp;<br />
                                                <table border="0" cellpadding="0" cellspacing="0" style="width: 38px">
                                                    <tr>
                                                        <td style="width: 112px; height: 15px" valign="middle">
                                                <asp:Label ID="lbThirdItem" runat="server" Font-Bold="True" Font-Names="幼圆" Font-Size="14px" Width="150px" Text='<%# Eval("SecondItemName") %>' CssClass="lableshow"></asp:Label></td>
                                                        <td style="width: 100px; height: 15px" id="imgRight">
                                                            <img id="htmlImage1" src="App_Themes/Default/Images/expand.jpg" style ="display: none" /></td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td id='<%# "divSub"+Eval("SortOrder")%>' style="display: none; width: 229px; background-color: #f1f1fe;
                                                text-align: center; text-decoration: none">
                                                <asp:DataList ID="dl3" runat="server" HorizontalAlign="Center">
                                                    <ItemTemplate>
                                                        <asp:HyperLink ID="HyperLink1" runat="server" Font-Size="12px" ForeColor="#000000"
                                                            NavigateUrl='<%# getUrl((Int64)Eval("ThirdItemID"),(String)Eval("NavigationUrl")) %>'
                                                            Text='<%# Eval("ThirdItemName") %>' CommandArgument='<%# Eval("ThirdItemID") %>'></asp:HyperLink>
                                                    </ItemTemplate>
                                                </asp:DataList></td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                            </asp:DataList>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </td>
                        <td class="compart" style="vertical-align: middle; width: 10px; height: 602px; text-align: center">
                            &nbsp;&nbsp;<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                <ContentTemplate>
                                    <asp:ImageButton ID="controller" runat="server" AlternateText="折叠" CausesValidation="False"
                                        ImageUrl="~/Images/MasterPage/controller_collapse.gif" OnClick="controller_Click"
                                        OnClientClick="ExpandContents(this);" />
                                </ContentTemplate>
                            </asp:UpdatePanel>
                            &nbsp;&nbsp;
                            
                        </td>
                        <td style="text-align: center; height: 602px;" valign="top">
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                            </asp:ContentPlaceHolder>
                        </td>
                    </tr>
                </table>
            </div>
        </div>    </form>
</body>
</html>请问哪位高手知道请指点我,如果有相关的asp.net + javascript动态折叠菜单的例子更好,谢谢!