Javascript 如何通过单击ItemTemplate展开ListView的ItemTemplates内容?
我有一个Javascript 如何通过单击ItemTemplate展开ListView的ItemTemplates内容?,javascript,asp.net,asprepeater,Javascript,Asp.net,Asprepeater,我有一个列表视图,其中包含许多项目模板。每个ItemTemplate中都有一个Repeater,显示每个ItemTemplate中的文件列表(即类别)。当前,所有类别中的所有文件都可见。但我只想显示类别,通过单击每个类别,展开它并显示该类别中的文件 我该怎么做 以下是我目前的代码: <asp:ListView runat="server" ID="lvDownloadFilesViewer"> <ItemTemplate> <div cl
列表视图
,其中包含许多项目模板
。每个ItemTemplate
中都有一个Repeater
,显示每个ItemTemplate
中的文件列表(即类别)。当前,所有类别中的所有文件都可见。但我只想显示类别,通过单击每个类别,展开它并显示该类别中的文件
我该怎么做
以下是我目前的代码:
<asp:ListView runat="server" ID="lvDownloadFilesViewer">
<ItemTemplate>
<div class="downloadList-Headline">
<%#Eval("Title")%>
</div>
<div class="downloadList">
<ul>
<asp:Repeater ID="Repeater1" runat="server" EnableViewState="false" DataSource='<%# DataBinder.Eval(Container.DataItem, "DownloadFilesItemList") %>'>
<ItemTemplate>
<li style="width:100%">
<div class="FileDescription"><%# DataBinder.Eval(Container.DataItem, "Description")%>
</div>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</ItemTemplate>
</asp:ListView>
-
使用以下方法:
<style>
.downloadList
{
display: none;
}
.downloadList-Headline
{
cursor: pointer;
}
</style>
<script>
$(document).ready(function () {
$('.downloadList-Headline').click(function() {
$(this).next().toggle('medium');
});
});
</script>
<asp:ListView runat="server" ID="lvDownloadFilesViewer">
<ItemTemplate>
<div class="downloadList-Headline">
[+] <%#Eval("Title")%>
</div>
<div class="downloadList">
<ul>
<p></p>
<asp:Repeater ID="Repeater1" runat="server" EnableViewState="false" DataSource='<%# DataBinder.Eval(Container.DataItem, "DownloadFilesItemList") %>'>
<ItemTemplate>
<li style="width:100%">
<div class="FileDescription"><%# DataBinder.Eval(Container.DataItem, "Description")%></div>
<a href="<%#Page.ResolveClientUrl((string)Eval("FilesPath")) %>" class="<%# DataBinder.Eval(Container.DataItem, "FilesTypeTitle")%>"
target="_blank">
<%# DataBinder.Eval(Container.DataItem, "FilesTitle")%></a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</ItemTemplate>
</asp:ListView>
.下载名单
{
显示:无;
}
.下载名单标题
{
光标:指针;
}
$(文档).ready(函数(){
$('.downloadlistheadline')。单击(函数(){
$(this.next().toggle('medium');
});
});
少解释就好了!!