jQuery - 呈現多個div元素w/slideToggle功能

Question

在我的ASP MVC 3視圖的索引頁中，我有一個可能有多達50個左右元素的集合對象。爲了保持索引對用戶乾淨，我試圖在集合包含5個以上的項目時使用jQuery .slideToggle特性。

但是，我目前在$(document).ready中這樣做，並且因爲我給了<div>元素相同的名稱，所以當您單擊它們時，它們都會展開或摺疊。

我是jQuery全新的，所以我想知道什麼是實現這個目標的最好方法，如果這個方法是一個很好的方法去，如何只允許我點擊的項目摺疊/展開。

這裏是jQuery代碼

$(document).ready(function() { 
     $(".hidden").hide(); 
     $(".expand").click(function() { 
      $(".hidden").slideToggle("slow"); 

      if ($(".expand").html() == "[+] Expand") { 
       $(".expand").html("[-] Collapse"); 
      } else { 
       $(".expand").html("[+] Expand"); 
      } 
     }); 
    }); 

這裏是<div>的。由於這是索引頁面，因此它們位於foreach循環中，因此每個記錄都重複一次（因此每個記錄都有相同的名稱）。

 @if (item.BankListAgentId.Count > 5) 
     { 
      <div class="expand">[+] Expand</div> 
      <div class="hidden"> 
       @foreach (var thing in item.BankListAgentId) 
       { 
        string value = thing.FixedOrVariable.Trim(); 
        if (value.Equals("F")) 
        { 
         var agentId = thing.AgentId.Trim(); 
         var link = ViewBag.Periscope + agentId; 
         <a href="@link" target="_blank">@thing.StateCode: @agentId</a> 
         <br />      
        } 
       }     
      </div> 
     }  

Answer 1

我建議你改變你的jQuery來：

$(document).ready(function() { 
    $(".hidden").hide(); 
    $(".expand").click(function() { 
     $(this).next(".hidden").slideToggle("slow"); 

     if ($(this).html() == "[+] Expand") { 
      $(this).html("[-] Collapse"); 
     } else { 
      $(this).html("[+] Expand"); 
     } 
    }); 
}); 

這樣，你將只針對.hidden元素的旁邊.expand你點擊時，還可以通過使用this代替.expand你」只會鎖定被點擊的元素...