Jquery複数の表の行を表示/非表示

Question

jqueryを使用して表の行を表示/非表示しようとしています。最初の2行は動作します。 3行目にすべてのデータが表示されません。

Jfiddle：jQueryの表示/非表示機能表 メイン データ

<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のためのhttp://jsfiddle.net/vcolmenar/wG8qf/1/

HTMLデータ

$(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 {表示：なし;}

ジャバスクリプト

$(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>