C# 如何在ASP.NET中使用JavaScript显示/隐藏嵌套列表？

编辑：找到解决方案，并将答案发布在下面

在我的ASP.NET c#项目中，我有一个绑定到数据源的

ListView

（

ParentList

）。在

ParentList

中，在

ItemTemplate

中，我有另一个

Repeater

（

ChildList

）绑定到每个

ListViewDataItem

的属性

<asp:ListView ID="ParentList" runat="server" DataSourceID="objectDataSourceID" DataKeyNames="ID">                    
    <ItemTemplate>
        <tr>
            <td>
                <asp:Label ID="Label1" runat="server" Text='<%# Eval("Attribute1") %>' />
            </td>
            <td valign="top">
                <asp:Repeater ID="ChildList" runat="server" DataSource='<%# Eval("Attribute2ReturnsAnotherList") %>'>
                    <HeaderTemplate>
                        <ul>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <li>
                            <%# DataBinder.Eval(Container.DataItem, "childAttribute") %> 
                        </li>
                    </ItemTemplate>
                    <FooterTemplate>
                        </ul>
                    </FooterTemplate>
                </asp:Repeater>
            </td>
        </tr>
    </ItemTemplate>
    <LayoutTemplate>
        ...
    </LayoutTemplate>
</asp:ListView>

我怎样才能做到这一点？我不能像通常那样使用

getElementById

，因为

ul

列表嵌套在

列表视图中的
中继器中。我尝试获取
父节点
，然后访问
子节点
，并在以下范围内切换
ul
元素的可见性：

function ToggleListVisibility(source) {
    var childrenlist = source.parentNode.children;
    for (var i = 0; i < childrenlist.length; i++) {
        if (childrenlist[i].tagName == 'ul') {
            if (childrenlist.style.display == "none") {
                childrenlist.style.display = "block";
            } else {
                childrenlist.style.display = "none";
            }                    
        }
    }            
}

<a href="javascript:ToggleListVisibility(this)" >Show/Hide</a>

最后，我尝试将
ul
对象传递到Js函数中，如下所示：

function ToggleListVisibility(src) {
    if (src.style.display == "none") {
        src.style.display = "block";
    } else {
        src.style.display = "none";
    }                              
}

<a href="javascript:ToggleListVisibility(ulID)" >Show/Hide</a>
...
<ul id="ulID">

<table>
  <tbody>
  ...
    <tr>
      <td>
         <a href="#" onclick="javascript:toggleListVisibility(this);">Hide</a>
         <ul>
           <li>One</li>
           <li>Two</li>
           <li>Three</li>
         </ul>
      </td>
    </tr>
  ...
  </tbody>
</table>

<script type="text/javascript">
  function toggleListVisibility(src) {
    var childrenList = src.nextSibling.nextSibling;
    childrenList.style.display = "none";
  }
</script>

功能切换列表可见性（src）{
如果（src.style.display==“无”）{
src.style.display=“block”；
}否则{
src.style.display=“无”；
}                              
}
...


这是可行的，但它会切换my
ParentList
中所有行中的
ChildList
的可见性。我希望它只在自己的行中切换
ChildList
的可见性

我不知道该怎么办。JavaScript不是我的强项，如果有人能提供一些指导，我将不胜感激。提前谢谢。
好的，希望这会让你走起来——我隐藏了一个列表，这对我很有用。我的源HTML如下所示：

function ToggleListVisibility(src) {
    if (src.style.display == "none") {
        src.style.display = "block";
    } else {
        src.style.display = "none";
    }                              
}

<a href="javascript:ToggleListVisibility(ulID)" >Show/Hide</a>
...
<ul id="ulID">

<table>
  <tbody>
  ...
    <tr>
      <td>
         <a href="#" onclick="javascript:toggleListVisibility(this);">Hide</a>
         <ul>
           <li>One</li>
           <li>Two</li>
           <li>Three</li>
         </ul>
      </td>
    </tr>
  ...
  </tbody>
</table>

<script type="text/javascript">
  function toggleListVisibility(src) {
    var childrenList = src.nextSibling.nextSibling;
    childrenList.style.display = "none";
  }
</script>


...

一个
两个
三

...
功能切换列表可见性（src）{
var childrenList=src.nextSibling.nextSibling；
childrenList.style.display=“无”；
}

注意我不得不使用两个“nextSibling”，因为在“hide”锚之后创建了一个文本节点。根据你的HTML结构，这一点会有所不同。
我找到了一个令人痛苦的简单答案，让我觉得自己像个傻瓜。我所需要做的就是将我的
中继器
包装在
元素中，然后显示/隐藏整个内容

<a href="javascript:ToggleListVisibility('<%# Container.FindControl("divWrapper").ClientID %>')" >Show/Hide</a>
<div id="divWrapper" runat="server">                                
<asp:Repeater ID="ChildList" runat="server">
</asp:Repeater>
</div>

function ToggleListVisibility(id) {
    var wrapper = document.getElementById(id);
    if (wrapper.style.display == "none") {
        wrapper.style.display = "block";
    } else {
        wrapper.style.display = "none";
    }
}


功能切换列表可见性（id）{
var wrapper=document.getElementById（id）；
if（wrapper.style.display==“无”）{
wrapper.style.display=“block”；
}否则{
wrapper.style.display=“无”；
}
}

为过度思考欢呼
 奇怪的是，不，这不起作用，尽管看起来应该这样。不过，谢谢你的回答：）发生了什么事？什么也没发生。IE报告“预期对象”。不管怎样，我已经找到了解决办法。谢谢