Tabellenzeile ein-/ausblenden

Question

In dem gegebenen Beispiel verstecken/zusammenklappen gut spielen, aber wenn ich auf "LC" link (bg-gelb) von "This is parent 1" klicke, wird nur ein versteckter tr angezeigt: "This is 1st Child "wenn es zwei versteckte Ebenen gibt" Dies ist Parent 1 ", ich brauche, wenn ich auf" LC "beide ausgeblendeten Ebenen gleichzeitig öffne, überprüfe die HTML-Struktur und entferne die" .hidden "-Klasse von CSS.

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

Verwenden Sie nextUntil(), mit :not() Pseudo Selektor.

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

DEMO

Answer 2

können Sie nextUntil() und toggleClass() Methoden. Auch können Sie Ihre js wie folgt verkürzen.

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