0

2 レベルのネストされたリピーターの結果の例

スキルカテゴリ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 をクリックすると、子リピーター内の 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>
4

1 に答える 1

0

.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");
});
于 2013-02-18T07:29:40.723 に答える