表行隐藏/折叠

Question

在给定的示例中，隐藏/折叠发挥良好，但是当我单击"This is parent 1“的”L“链接(bg-黄色)时，它只显示一个隐藏的tr，即”这是第一个孩子“，当有两个隐藏层时，”这是父层“，当我一次单击”L“两个隐藏层时，检查从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在这里

Answer 1

使用nextUntil()和:not()伪选择器。

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

演示

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');
})

更新小提琴