Jquery 折叠的行仅扩展了一小会儿，然后又消失了

我一直在试验HTML表和可折叠行，因为我需要一种在单击事件之后显示表中某一行的更多信息的方法

到目前为止我所做的是

<table class="table table-bordered">
    <tbody>
        <tr class="clickable" id="row3" data-toggle="collapse" data-target="#innerRow3" aria-expanded="false">
            <td class="text-center"><i id = "step3" aria-hidden="true"></i></td>
            <td>Header!</td>
        </tr>
        <tr class="collapse out" id="innerRow3">
            <td>Test!</td>
        </tr>
    </tbody>
</table>

头球！
测试！

当我单击id为

row3

的行时，我看到的是，

innerRow3

会展开一小会儿，甚至在显示后不到一秒钟就消失了

我使用的是jQuery3.2.1和Bootstrap3.3.7来实现这一点

编辑：根据user@charlietfl的建议，下面是一个可验证的示例：

---

如果您查看这个问题中提供的plunker，我有Bootstrap 4.0.0 CSS和Bootstrap 3.3.7 JS文件，这可能会导致不一致，从而导致错误

---

切换到Bootstrap3.3.7CSS解决了这个问题

。提供一个复制问题的问题编辑后的问题，我提供了一个链接到一个可验证的plunker。感谢您的建议，将Bootstrap4.0 CSS更改为Bootstrap3.3.7（与JS文件的版本相同）解决了这个问题。是的……注意到了这一点