jquery顯示/隱藏多個錶行

Question

試圖顯示/隱藏表使用jQuery的行。前兩行工作。第三行不顯示所有數據。

Jfiddle：http://jsfiddle.net/vcolmenar/wG8qf/1/

HTML爲表 主 數據

<tr class="main"> 
    <td> 
    <a href="#" class="main">12345</a> 
    </td> 
</tr> 

<tr class = "data"> 
    <td> 
    </td> 
    <td> 
     11111 
    </td> 
</tr> 

<tr class="main"> 
    <td> 
     <a href="#" class="main">12345</a> 
    </td> 
</tr> 

<tr class = "data"> 
    <td> 
    </td> 
    <td> 
     11111 
    </td> 
</tr> 

<tr class="main"> 
    <td> 
     <a href="#" class="main">12345</a> 
    </td> 
</tr> 

<tr class = "data"> 
    <td> 
    </td> 
    <td> 
     11111 
    </td> 
</tr> 

<tr class = "data"> 
    <td> 
    </td> 
    <td> 
     22222 
    </td> 
</tr> 
<tr class = "data"> 
    <td> 
    </td> 
    <td> 
     33333 
    </td> 
</tr> 
<tr class = "data"> 
    <td> 
    </td> 
    <td> 
     44444 
    </td> 
</tr> 

JavaScript進行Jquery的顯示/隱藏功能數據

$(document).ready(function() { 
//Hide table rows with class 'min', but appear when clicked. 
$(".data").hide(); 
$(".main").click(function() { 
    $(this).parent().parent().next(".data").toggle("fast"); 
}); 
}); 

Answer 1

CSS

tr.data {顯示：無;}

的JavaScript

$(function(){ 
    $("#main-data-table","body").on({'click':function(event){ 
    event.preventDefault(); 
    $(this).closest("tr.main").nextUntil("tr.main").toggle("fast"); 
    }}, 
    "a.main",null); 
}); 

HTML

<table id="main-data-table"> 
<thead><tr> 
    <th>Main</th> 
    <th>Data</th> 
</tr></thead> 
<tfoot></tfoot> 
<tbody> 
<tr class="main"> 
     <td> 
     <a href="#" class="main">12345</a> 
     </td> 
    </tr> 

    <tr class = "data"> 
     <td> 
     </td> 
     <td> 
      11111 
     </td> 
    </tr> 

    <tr class="main"> 
     <td> 
      <a href="#" class="main">12345</a> 
     </td> 
    </tr> 

    <tr class = "data"> 
     <td> 
     </td> 
     <td> 
      11111 
     </td> 
    </tr> 

    <tr class="main"> 
     <td> 
      <a href="#" class="main">12345</a> 
     </td> 
    </tr> 

    <tr class = "data"> 
     <td> 
     </td> 
     <td> 
      11111 
     </td> 
    </tr> 

    <tr class = "data"> 
     <td> 
     </td> 
     <td> 
      22222 
     </td> 
    </tr> 
    <tr class = "data"> 
     <td> 
     </td> 
     <td> 
      33333 
     </td> 
    </tr> 
    <tr class = "data"> 
     <td> 
     </td> 
     <td> 
      44444 
     </td> 
    </tr> 
</tbody> 
</table>