javascript - 如何通过单击 ItemTemplate 来展开 ListView 的 ItemTemplates 的内容？

Question

我有一个带有许多ItemTemplates的ListView。每个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>

Answer 1

使用这个:

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