Bootstrap - 可折叠的行 - 隐藏显示我们正在扩展的行

Question

我有一个包含扩展行列表的表 我的一个<tr>是父母，接下来是我正在扩展的孩子

我希望在未展开时隐藏第二行。 以下是我正在使用的代码 我还添加了图片：我要隐藏的红色<tr> ..您还可以在下一行中看到展开的<tr>：

 <tr class="clickable apply-max-width">
    <td class="table-tr1-td1 togglebutton" data-toggle="collapse" data-target="#accordion5"><b aria-hidden="true"><img src="../images/plus.png"/></b></td>
    <td>joed123@yahoo.com</td>
    <td colspan="2">WD154590</td>
    <td>2/1/2017</td>
    <td>Yes</td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td colspan="2">
        <div id="accordion5" class="accordion collapse data-found">

            <table class="table table-striped data-table-inner-disabled div-found">
                <thead>
                    <tr>
                        <th></th>
                        <th class="">Application</th>
                        <th class="">App Role</th>
                        <th>Workflow Status</th>

                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="application-User-inv"><img src="../images/delete_1.png" class="img-responsive" /></td>
                        <td class="application-User-inv">Portal</td>
                        <td>User</td>
                        <td>Pending Approval</td>
                    </tr>
                    <tr>
                        <td class="application-User-inv"><img src="../images/delete_1.png" class="img-responsive" /></td>
                        <td class="application-User-inv">SSR</td>
                        <td>User</td>
                        <td>Provisioned</td>
                    </tr>
                </tbody>
            </table>

        </div>
    </td>
    <td></td>
    <td>

    </td>
    <td></td>
</tr>

Answer 1

如果可能，您应该尝试使用JQuery。这样您就可以使用JS来管理显示/隐藏元素的状态，并且可以在浏览器中保存状态。