在表中使用.closest来隐藏行

Question

我目前正在开发一个表,可以扩展单击行的详细信息.单击一行后,我希望隐藏<tr>在其下方显示.我得到了正确的工作,但当我再次尝试隐藏它时,下面会出现一个我不想发生的白框.这是我的例子的小提琴: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>with class 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();
    });
});

更新后的