jQuery的可摺疊面板

Question

ASP.Net，2.0 VS2005，NET 2.0的jQuery 1.8.3，jQuery UI的1.9.2

我有兩個面板（更會以後）我的形式，可以是打開或關閉上在用戶請求。

我正在使用jQuery'.slideToggle'方法。

這是我的標記

<div class="trigger0">Collapsible Header 1 - Click to toggle</div> 
      <div class="panel0"> 
       content 1 
      </div> 
      <div class="trigger1">Collapsible Header 2 - Click to toggle</div> 
      <div class="panel1"> 
       content 2 
      </div> 

下正常工作

$(document).ready(function() { 
     $(".trigger0").click(function(){ 
      $(".panel0").slideToggle("medium"); 
     }); 
     $(".trigger1").click(function() { 
      $('.panel1').slideToggle("medium"); 
     }); 
    });  

但這並不

$(document).ready(function() { 
     for (var vReportSectionCount = 0; vReportSectionCount < 2; vReportSectionCount++) 
     { 
      $(".trigger" + vReportSectionCount).click(function(){ 
       $(".panel" + vReportSectionCount).slideToggle("medium"); 
      }); 
     } 
    }); 

因爲我不還不知道有多少板最終將設i不想爲每個面板寫一個新行。有人可以向我解釋爲什麼並提出更好的解決方案嗎？

Answer 1

這可能是你要找的東西嗎？這可以讓你的名字的類爲類，而不是ID的

HTML

<div class="trigger">Collapsible Header 1 - Click to toggle</div> 
<div class="panel"> 
    content 1 
</div> 

<div class="trigger">Collapsible Header 2 - Click to toggle</div> 
<div class="panel"> 
    content 2 
</div> 

的Javascript

$(document).ready(function() { 
    $(".trigger").click(function(){ 
     $(this).next(".panel").slideToggle("medium"); 
    }); 
}); 

這裏你可以看到一個演示：http://jsfiddle.net/LkTf8/1/

Answer 2

嘗試jQuery UI Tabs和jQuery UI Accordion不要做一個已經完成的工作人員:)