javascript - 如何使我的嵌套 ListView 可折叠和可展开

Question

我有一个像这样的嵌套 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>

---

我想做的是:一开始折叠到外部 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>
....

Answer 1

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

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

我认为这对你有用