收缩的行只是短暂地扩展，然后再次消失

我一直在尝试使用HTML表格和可折叠行，因为我需要一种方法在click事件后显示有关表中某一行的更多信息。收缩的行只是短暂地扩展，然后再次消失

我做了什么至今

<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扩展了一个短暂的瞬间，消失甚至没有第二个它已被证明了。

我正在使用的是JQuery 3.2.1和Bootstrap 3.3.7来实现这一点。

编辑：由用户@charlietfl的建议，这里是一个可验证的例子：

http://plnkr.co/edit/r7mRgNzpvpSi5jo6bANW?p=preview

来源

2017-07-03 Andrea Borzi

[Works fine here]（http://plnkr.co/edit/IA2b4vgBhpzzh7fpPOhG?p=preview）。提供再现问题的[mcve] – charlietfl

编辑的问题，我提供了一个链接到一个可验证的重击者。感谢您的建议 –

似乎将Bootstrap4.0 CSS更改为Bootstrap 3.3.7（与JS文件相同的版本）修复了问题 –