0

我正在使用下面的代码来 SlideToggle 中继器中的 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");

        });

    });

4

1 回答 1

0

您需要将您的容器包装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>

使用class而不是idblueBar和location div。

如下修改您的 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>
于 2013-10-06T09:56:58.330 回答