SlideToggle中繼器中的多個div

我正在使用下面的代碼在Repeater中SlideToggle divs。由於它是一箇中繼器，我無法捕獲第二個div的正確ID。當我點擊欄時，SlideToggle for Description工作正常，但ItemTemplate中所有項目的位置在同一時間切換，而不管哪個項目的欄被點擊。在轉發器中滑動切換多個div的正確方法是什麼？請看下面的代碼：SlideToggle中繼器中的多個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"); 

     }); 

    });

來源

2013-10-06 bunnie

您將需要您的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和位置的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-06 09:56:58

：謝謝你的迴應Devraj！我完全按照您的建議進行了操作，但位置不可見。「描述」切換功能可用，但位置完全不顯示。我錯過了什麼嗎？ – bunnie

@bunnie，現在看我編輯的答案，我錯過了你給'style =「display：none;」'。您可以使用jQuery函數'.hide（）'和'.show（）'來隱藏或顯示任何DOM元素。 –

SlideToggle中繼器中的多個div

回答

相關問題