Jquery的显示/隐藏多个表行（闭合）(Jquery Show/Hide Multiple Tab

试图展示使用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>

文章来源: Jquery Show/Hide Multiple Table Rows [closed]