SlideToggle несколько divs в ретрансляторе

Question

Я использую ниже код для SlideToggle divs в Repeater. Поскольку это ретранслятор, я не могу зафиксировать правильный идентификатор для второго div. Когда я нажимаю на панель, функция 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

Вы должны обернуть RepeaterItemTemplate в контейнер 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 вместо id для обоих blueBar и место дивы.

Измените часть 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>