Question

在给定的例子中，隐藏/崩溃很好，但是当我点击“这是父母1”的“LC”链接（bg-yellow）时，只显示一个隐藏的tr，即“这是第1个孩子” 2隐藏层吼叫“这是父1”，当我点击“LC”时我需要一次打开隐藏层，检查HTML结构从CSS中删除“.hidden”类。

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

表行隐藏/折叠

2 个答案: