Question

我正在尝试建立一个表格。该表包含以下内容。每行都是一行。

Main-Parent
 + Parent
  - children
  - children
 + Parent
  - children
  - children

孩子们会沦为父母。每个父母都会沦为主要父母。我已经部分工作但不完全。您可以在http://jsfiddle.net/0Lh5ozyb/88/

中查看该行为

HTML

<table class="table">
    <tr class="main-parent" id="">
        <td><div>MAIN PARENT</div></td>
        <td><div>MAIN PARENT</div></td>
        <td><div>MAIN PARENT</div></td>
    </tr>
    <tr class="parent sub" id="row1">
        <td><div>PARENT</div></td>
        <td><div>PARENT</div></td>
        <td><div>PARENT</div></td>
    </tr>

    <tr class="child-row1-1 sub">
        <td><div>CHILD</div></td>
        <td><div>Jackson</div></td>
        <td><div>94</div></td>
    </tr>
    <tr class="child-row1-2 sub">
        <td><div>CHILD</div></td>
        <td><div>Doe</div></td>
        <td><div>80</div></td>
    </tr>
    <tr class="parent sub" id="row2">
        <td><div>PARENT</div></td>
        <td><div>PARENT</div></td>
        <td><div>PARENT</div></td>
    </tr>

    <tr class="child-row2-1 sub">
        <td><div>CHILD</div></td>
        <td><div>Jackson</div></td>
        <td><div>94</div></td>
    </tr>
    <tr class="child-row2-2 sub">
        <td><div>CHILD</div></td>
        <td><div>Doe</div></td>
        <td><div>80</div></td>
    </tr>
</table>

JQUERY

// main heading
$('tr.main-parent')
    .css("cursor", "pointer")
    .click(function () {
        var $children = $(this).nextUntil($('tr').not('.sub'));
        $children.find('td > div, td').slideToggle();
});
$('tr[class^=child-]').find('td > div, td').hide();

// parent heading
$('tr.parent')
    .css("cursor", "pointer")
    .click(function () {
        var $children = $(this).nextUntil($('tr').not('[class^=child-]'));
        $children.find('td > div, td').slideToggle();
});
$('tr.sub').find('td > div, td').hide();

Answer 1

slideToggle不能用于主标题，因为子标题可能处于混合的可见性状态。你只是反转哪些副标题是可见的。

如果至少有一个可见，则需要全部关闭。

// main heading
$('tr.main-parent')
    .css("cursor", "pointer")
    .click(function () {

        var $children = $(this).nextUntil($('tr').not('.sub'));

        if ($children.find(':visible').length) {
            $children.find('td > div, td').slideUp();
        }       
        else {
            $children.find('td > div, td').slideDown();
        }
});

请参阅：http://jsfiddle.net/0Lh5ozyb/120/

修改

如果您只想在打开主标题时显示副标题，请先过滤它们：

$children.filter('.parent').find('td > div, td').slideDown();

更新示例：http://jsfiddle.net/0Lh5ozyb/133/

通过Jquery折叠表行

1 个答案: