[英]How to show/hide a nested list using JavaScript in ASP.NET?
Edit : Found the solution, and posted the answer below. 编辑 :找到解决方案,并在下面发布答案。
In my ASP.NET c# project, I have a ListView
( ParentList
) bound to a DataSource. 在我的ASP.NET c#项目中,我有一个绑定到数据源的
ListView
( ParentList
)。 Within the ParentList
, inside the ItemTemplate
, I have another Repeater
( ChildList
) bound to an attribute of each ListViewDataItem
. 在
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>
The code above works just fine, everything renders great. 上面的代码工作正常,所有内容都呈现出色。 Now I want to add a link that will show/hide the
ChildList
. 现在,我想添加一个链接,该链接将显示/隐藏
ChildList
。 Something like the below: 类似于以下内容:
<td valign="top">
<a href="javascript:ToggleListVisibility()" >Show/Hide</a>
<asp:Repeater ID="ChildList" runat="server" DataSource='<%# Eval("Attribute2ReturnsAnotherList") %>'>
</asp:Repeater>
</td>
How can I achieve this? 我该如何实现? I can't just use
getElementById
as I normally would, as the ul
lists are within a Repeater
nested inside the ListView
. 我不能像往常一样使用
getElementById
,因为ul
列表位于嵌套在ListView
内的Repeater
。 I tried obtaining the parentNode
, then accessing the children
and toggling the visibility of the ul
element within: 我尝试获取
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>
but that didn't work. 但这没用。 IE's 'error on page' gave me this error:
IE的“页面错误”给了我这个错误:
The parentNode is null or not an object.
parentNode为null或不是对象。
I also tried setting the a runat="server"
attribute to my ul
element, then using <%# ulID.ClientID %>
to pass the ul
id to the Js function, but visual studio complained: 我还尝试将
runat="server"
属性设置为ul
元素,然后使用<%# ulID.ClientID %>
将ul
id传递给Js函数,但是visual studio抱怨:
Server elements cannot span templates.
Finally, I tried just passing the ul
object into the Js function, like this: 最后,我尝试将
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">
which works , but it toggles the visibility for the ChildList
in all rows within my ParentList
. 它的工作原理 ,但它切换为知名度
ChildList
在我内的所有行ParentList
。 I want it to only toggle the visibility for the ChildList
in its own row. 我希望它仅在其自己的行中切换
ChildList
的可见性。
I'm at a loss of what to do. 我不知所措。 JavaScript is not my forte, and I would appreciate if someone can provide some pointers.
JavaScript不是我的强项,如果有人可以提供一些指针,我将不胜感激。 Thanks in advance.
提前致谢。
Ok hopefully this will get you going - it worked for me in hiding a list. 好的,希望这会帮助您-在隐藏列表方面对我有用。 My source HTML looks like this:
我的源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>
Note I had to use two "nextSibling"'s due to a text node that is created right after the "hide" anchor. 注意由于文本节点是在“隐藏”锚点之后立即创建的,因此我不得不使用两个“ nextSibling”。 Depending on how you structure your HTML, that bit will be different.
根据您HTML的结构方式,这一点将有所不同。
I found the painfully simple answer that makes me feel like a doofus. 我找到了痛苦而又简单的答案,这让我感到自己像疯子。 All I needed to do is wrap my
Repeater
in a <div>
element, then show/hide the entire thing. 我要做的就是将
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";
}
}
Hooray for overthinking! 万岁!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.