jquery - 使用 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");
});