javascript 在asp.net 做折叠导航遇到的问题，请教各位高手
我用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>
<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>
<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>
</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">
</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">
<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">
<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>
</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动态折叠菜单的例子更好，谢谢！ --------------------编程问答-------------------- --------------------编程问答-------------------- 也不会，期待解答！ --------------------编程问答-------------------- 因为你在DataList里放的img ID为htmlImage1 , 页面中 每一行的img的ID都是htmlImage1 这样
document.getElementById("htmlImage1");查找这个 img肯定只找到第一个 因为ID不唯一
所以最好给img一个Name 用 document.getElementsByName("name");取到所有img 再做验证吧
从而找到第几个img要展开 --------------------编程问答-------------------- 谢谢大哥的指点！但是我还有点不明白，如何给一个动态的htmlImage1分别取不同的Name 呢？
补充：.NET技术 , Web Services
