如何使我的嵌套listview可折叠和可扩展

时间:2013-02-12 09:18:56

标签: javascript jquery asp.net css ajax

我有一个像这样的嵌套ListView:

  <asp:ListView runat="server" ID="lvOuter" DataKeyNames="camp_code" OnItemDataBound="lvOuter_ItemDataBound">
                                    <LayoutTemplate>
                                        <ul>
                                            <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
                                        </ul>
                                    </LayoutTemplate>
                                    <ItemTemplate>
                                        <li>
                                            <%# Eval("camp_name") %>
                                            <asp:HiddenField ID="hf_camp_code" runat="server" Value='<%# Eval("camp_code") %>' />
                                            <asp:ListView runat="server" ID="lvInner">
                                                <LayoutTemplate>
                                                    <ul>
                                                        <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
                                                    </ul>
                                                </LayoutTemplate>
                                                <ItemTemplate>
                                                    <li>
                                                        <asp:HiddenField ID="hf_main_code" runat="server" Value='<%# Eval("main_code") %>' />
                                                        <asp:HiddenField ID="hf_year" runat="server" Value='<%# Eval("year") %>' />
                                                        <asp:LinkButton ID="lbtn_dep" runat="server" CommandName="get_dep"><%# Eval("name") %> (<%# Eval("dep_count") %>)</asp:LinkButton>
                                                    </li>
                                                </ItemTemplate>
                                                <EmptyDataTemplate>
                                                    <ul>
                                                        <li>---</li>
                                                    </ul>
                                                </EmptyDataTemplate>
                                            </asp:ListView>
                                        </li>
                                    </ItemTemplate>
                                    <EmptyDataTemplate>
                                        ---
                                    </EmptyDataTemplate>
</asp:ListView>

我想做的是: 在开头折叠到外部列表视图并在需求下展开。

例如:

   - 1-OUTER1
      1.1 INNER1
      1.2 INNER2
      1.3 INNER3

   - 2-OUTER2
      2.1 INNER1
      2.2 INNER2
      2.3 INNER3

我在开始时想要以下内容:

 +OUTER1
 +OUTER2

如何使用嵌套的ListView获取此行为?


来自FireBug:

<div>
<ul>
<li>
Computer
<input id="ctl00_ContentPlaceHolder1_lvOuter_ctrl0_hf_camp_code" type="hidden" value="1" name="ctl00$ContentPlaceHolder1$lvOuter$ctrl0$hf_camp_code">
<ul>
<li>
<input id="ctl00_ContentPlaceHolder1_lvOuter_ctrl0_lvInner_ctrl0_hf_main_code" type="hidden" value="1" name="ctl00$ContentPlaceHolder1$lvOuter$ctrl0$lvInner$ctrl0$hf_main_code">
<input id="ctl00_ContentPlaceHolder1_lvOuter_ctrl0_lvInner_ctrl0_hf_year" type="hidden" value="2012" name="ctl00$ContentPlaceHolder1$lvOuter$ctrl0$lvInner$ctrl0$hf_year">
<a id="ctl00_ContentPlaceHolder1_lvOuter_ctrl0_lvInner_ctrl0_lbtn_dep" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$lvOuter$ctrl0$lvInner$ctrl0$lbtn_dep','')">jm</a>
</li>
....

1 个答案:

答案 0 :(得分:1)

http://jsfiddle.net/EsWv3/1/

$("li.parent").click( function() {
    $(this).next(".child").toggle("fast");
});

我认为这对你有用