嵌套的Repeater使用JQuery无法扩展/折叠

Question

两级嵌套转发器 结果的例子

技能类别1
  技巧1
  技巧2
  技巧3
技能类别2
  技巧1
  技巧2

and here is my Jquery
<script type="text/javascript">
    $(document).ready(function()
    {
        $(".expandhideContents").hide();


        $(".expandhideHeader").click(function()
        {
            $(this).next(".expandhideContents").slideToggle("fast"); 

        });
    });

我的问题是，当我点击技能类别1时，只有一个儿童中继器内的项目切换，如何才能使该类别中的所有项目单击展开或折叠？

这是我的HTML代码：

 <asp:Repeater ID="repeaterSkillCategory" runat="server" EnableViewState="true">
        <ItemTemplate>
            <tr class="expandhideHeader">
            <td width="500px"> 
                <asp:Label Font-Bold="true" ID="skillTypeName" runat="server" Text= <%#DataBinder.Eval(Container.DataItem,"SkillTypeName") %>></asp:Label>
                </td>
                <td></td>
                </tr>
                <asp:Repeater ID="repeaterSkills" runat="server" EnableViewState="true"  >
                    <ItemTemplate >

                        <tr class="expandhideContents">
                        <td ><div class="gbl-FormField candidate-Skills" >
                            <asp:HiddenField ID="hfSkillID" runat="server" Value=<%# DataBinder.Eval(Container.DataItem, "SkillID") %> />
                            <asp:Label ID="lblSkill" runat="server" Text= <%# DataBinder.Eval(Container.DataItem, "SkillName") %> /></div>
                        </td>
                        <td>
                            <div class="gbl-TextBoxField"><asp:TextBox ID="txtMonthsExperience" runat="server" Width="50px"></asp:TextBox><span class="gbl-FormValidator">
                            <asp:RegularExpressionValidator ID="revMonthsExperience" runat="server" ErrorMessage="Value must be a whole number." ControlToValidate="txtMonthsExperience" Display="Dynamic" SetFocusOnError="True" ValidationExpression="^\d+$"></asp:RegularExpressionValidator></span></div>
                        </td>
                    </tr>
                    </div>
                    </ItemTemplate>
                </asp:Repeater> 


         </ItemTemplate>

    </asp:Repeater>

Answer 1

根据您的情况使用.nextUntil()：http://jsfiddle.net/r2S33/

我想你有这种html结构：

<div class='expandhideHeader'>Skill page category 1</div>
    <div class='expandhideContents'>Skill 1</div>
    <div class='expandhideContents'>Skill 2</div>
    <div class='expandhideContents'>Skill 3</div>
<div class='expandhideHeader'>Skill page category 1</div>
    <div class='expandhideContents'>Skill 1</div>
    <div class='expandhideContents'>Skill 2</div>
    <div class='expandhideContents'>Skill 3</div>

所以jQuery应该是这样的：

$(".expandhideHeader").click(function () {
    $(this).nextUntil('.expandhideHeader').slideToggle("fast");
});