Jquery 滑动切换中继器中的多个div

我用下面的代码在中继器中滑动切换div。 由于它是一个中继器，我无法为第二个div捕获正确的id。当我单击该条时，说明的滑块切换工作正常，但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");

        });

    });

$（文档）.ready（函数（）{
$（'[id*=“blueBar”]'）。单击（函数（）{
$（this.next（）.slideToggle（“slow”）；
$（'[id*=“location”]'）。滑动切换（“slow”）；
});
});

---

您需要将

中继器

项目模板

包装到容器

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>

<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>

---

：谢谢您的回复Devraj！我完全按照你的建议做了，但位置不可见。描述切换有效，但位置根本不显示。我遗漏了什么吗？@bunnie，现在看我编辑的答案，我遗漏了你给出的

style=“display:none；”

。可以使用jQuery函数

.hide（）

和

.show（）

隐藏或显示任何DOM元素。