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>