javascript - 在表中使用 .closest 隐藏行

Question

我目前正在制作一个表格，该表格可在单击某行时展开详细信息。单击一行后，我想要隐藏的 <tr>在它下面显示。我让它正常工作，但是当我再次尝试隐藏它时，下面会出现一个我不想出现的白框。这是我的例子的 fiddle :https://jsfiddle.net/pt0skyyb/

HTML:

<table class="table">
    <tr>
        <th>Details</th>
        <th>First</th>
        <th>Second</th>
    </tr>
    <tr>
        <td>+</td>
        <td>First</td>
        <td>Second</td>
    </tr>
    <tr class="child">
        <td colspan="3">
            <table class="child-table">
                <tbody>
                    <tr>
                        <th>First</th>
                        <th>Second</th>
                        <th>Third</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>

    <tr>
        <td>+</td>
        <td>Third</td>
        <td>Fourth</td>
    </tr>
    <tr class="child">
        <td colspan="3">
            <table class="child-table">
                <tbody>
                    <tr>
                        <th>First</th>
                        <th>Second</th>
                        <th>Third</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>

JS:

$(function() {
    $("td[colspan=3]").find("table").hide();

    $("table").click(function(event) {
        event.stopPropagation();
        var $target = $(event.target);
        var $child = $target.closest('tr.child');
        var $next = $target.closest("tr").next();   
        if ( $child.hasClass("shown")) {
            $child.hide().removeClass("shown");
        } else {
            $next.show().addClass("shown").slideToggle();
        }                    
    });
});

如果您查看 html，<tr>与类 child设置为 display:none;首先，它是隐藏的。一旦您单击该行使其出现然后再次消失，它并没有被完全隐藏并留下一个白色框。我试图让它完全消失，就像它被点击之前一样。

为此，我正在尝试 $target.closest('tr').find('.child').hide();隐藏它，但我无法让它正常工作。现在它永远不会进入 if 语句，检查是否最接近 tr.child。显示并且无法弄清楚原因。

Answer 1

将您的 js 更改为以下内容。

$(function () {
    $(".table tr:gt(0)").click(function (event) {
        $(this).next('tr.child').toggle();
    });
});

UPDATED FIDDLE