小编Pie*_*tro的帖子

我目前正在开发一个表,可以扩展单击行的详细信息.单击一行后,我希望隐藏<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 …