Question

我正在使用以下代码在Repeater中滑动div。由于它是转发器，我无法捕获第二个div的正确ID。当我单击栏时，SlideToggle for Description工作正常，但ItemTemplate中所有项目的位置在同一时间切换，而不管单击哪个项目的栏。在转发器中滑动切换多个div的正确方法是什么？请参阅以下代码：

<ItemTemplate>
<div class="memberImage">
<asp:Image ImageUrl="~/Content/images/image1.jpg" runat="server"/>
 <div id="location" style="background-color:lightgrey; width:180px; height:200px; display:none;z-index:-30;margin-top: -20px;">

  </div>
</div>

<div class="memData">

   <div id="blueBar">
       <div id="Title"><%# Eval("title") %> </div>

       <asp:ImageButton style="margin-left:420px;" ID="ImageButton1" width="60" Height="60" ImageUrl="~/Content/images/down_arrow_white.png" runat="server" />

    </div>

    <div id="Description" style="display:none;" >
        <p> <%# Item.Description %></p>
     </div>
</div>
</ItemTemplate>

和jQuery代码是：

<script type="text/javascript">
    $(document).ready(function () {


        $('[id*="blueBar"]').click(function () {

            $(this).next().slideToggle("slow");

            $('[id*="location"]').slideToggle("slow");

        });

    });

Answer 1

您需要将Repeater ItemTemplate打包到容器div中，如下所示。

<ItemTemplate>
    <div class="container">
        <div class="memberImage">
            <asp:Image ImageUrl="~/Content/images/image1.jpg" runat="server"/>
            <div class="location" style="background-color:lightgrey; width:180px; height:200px; display:none;z-index:-30;margin-top: -20px;">
            </div>
        </div>
        <div class="memData">
            <div class="blueBar">
                <div id="Title"><%# Eval("title") %> </div>
                <asp:ImageButton style="margin-left:420px;" ID="ImageButton1" width="60" Height="60" ImageUrl="~/Content/images/down_arrow_white.png" runat="server" />
            </div>
            <div id="Description" style="display:none;" >
                <p> <%# Item.Description %></p>
            </div>
        </div>
    </div>
</ItemTemplate>

对 blueBar 和位置 div使用class代替id。

修改你的jQuery部分，如下所示。

<script type="text/javascript">
    $(document).ready(function () {
        $('.blueBar').click(function () {
            $(this).next().slideToggle("slow");

            //for location div you will need to traverse the DOM as below
            $(this).parent().sibling().find('.location').show().slideToggle("slow");
        });
    });
</script>

在Repeater中滑动多个div

1 个答案: