テーブル行hide/collapse

Question

この例では、hide/collapseがうまく動きますが、「This is parent 1」の「LC」リンク（bg-yellow）をクリックすると、隠しtrが1つだけ表示されます。 2つの隠された層があるとき "子供"は "これは親1です"、私は "LC"両方の隠された層を同時に開いて、CSSから ".hidden"クラスを削除するHTML構造をチェックする必要があります。

HTML：

<table> 
    <tr> 
     <td class="details-control"><a>L-O</a></td> 
     <td>This is parent 1</td> 
    </tr> 
    <tr class = "hidden"> 
     <td></td> 
     <td>This is 1st Child</td> 
    </tr> 
    <tr class = "hidden"> 
     <td></td> 
     <td>This is 2nd Child</td> 
    </tr> 
    <tr> 
     <td class="details-control"><a>L-O</a></td> 
     <td>This is parent 2</td> 
    </tr> 
    <tr class = "hidden"> 
     <td></td> 
     <td>This is 1st Child</td> 
    </tr> 
</table> 

CSS：

a {width:50px; display: block; background: yellow} 

.hidden { 
    display: none; 
} 

.details-control { 
    cursor:pointer; 
} 

のjQuery：

$('.details-control').click(function() { 
    var $td = $(this); 

    if ($td.html() == '<a>L-O</a>') { 
     $td.html('<a>L-C</a>'); 
     $td.parent().next(".hidden").show(); 
    } else { 
     $td.html('<a>L-O</a>'); 
     $td.parent().next(".hidden").hide(); 
    } 
}) 

JSFiddle Here

Answer 1

nextUntil()と:not()疑似セレクタを使用してください。

$td.parent().nextUntil(":not('.hidden')").show(); 

DEMO

Answer 2

あなたがnextUntil()とtoggleClass()メソッドを使用することができます。また、jsを次のように短縮することもできます。

$('.details-control').click(function() { 
    var $td = $(this); 
    var text = $td.html() == '<a>L-O</a>' ? '<a>L-C</a>' : '<a>L-O</a>'; 
    $td.html(text); 
    $td.parent().nextUntil('tr:has(.details-control)').toggleClass('hidden'); 
}) 

UPDATED FIDDLE