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

Question

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

在我的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>

上面的代码工作正常，所有内容都呈现出色。 现在，我想添加一个链接，该链接将显示/隐藏ChildList 。 类似于以下内容：

<td valign="top">
    <a href="javascript:ToggleListVisibility()" >Show/Hide</a>
    <asp:Repeater ID="ChildList" runat="server" DataSource='<%# Eval("Attribute2ReturnsAnotherList") %>'>
    </asp:Repeater>
</td>

我该如何实现？ 我不能像往常一样使用getElementById ，因为ul列表位于嵌套在ListView内的Repeater 。 我尝试获取parentNode ，然后访问children parentNode并在其中切换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>

但这没用。 IE的“页面错误”给了我这个错误：

parentNode为null或不是对象。

我还尝试将runat="server"属性设置为ul元素，然后使用<%# ulID.ClientID %>将ul id传递给Js函数，但是visual studio抱怨：

Server elements cannot span templates.

最后，我尝试将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">

它的工作原理 ，但它切换为知名度ChildList在我内的所有行ParentList 。 我希望它仅在其自己的行中切换ChildList的可见性。

我不知所措。 JavaScript不是我的强项，如果有人可以提供一些指针，我将不胜感激。 提前致谢。

Answer 1

好的，希望这会帮助您-在隐藏列表方面对我有用。 我的源HTML如下所示：

<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>

注意由于文本节点是在“隐藏”锚点之后立即创建的，因此我不得不使用两个“ nextSibling”。 根据您HTML的结构方式，这一点将有所不同。

Answer 2

我找到了痛苦而又简单的答案，这让我感到自己像疯子。 我要做的就是将Repeater包裹在<div>元素中，然后显示/隐藏整个内容。

<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";
    }
}

万岁！