用动态引导表隐藏子元素

Question

我正在使用动态表示例，我发现here（bootply）。它基本上是一个父，子关系的表，所以你可以点击一行，它将下拉另一行。我在这个例子中添加了一个级别，因此您可以将此示例视为父级，子级，孙级关系。我的问题是，如果你深入两级，然后单击父行，它只隐藏子行，而不是孙子行。我需要以某种方式解决这个'错误'..我已经尝试在div中包装父行并使用href =“＃collapse1”，而不是将该id放在孙子行上，但这不起作用。非常感谢任何其他建议。这是html ..

<table class="table table-responsive table-hover">
  <thead>
        <tr><th>Column</th><th>Column</th><th>Column</th><th>Column</th></tr>
    </thead>
    <tbody>
        <tr class="clickable" data-toggle="collapse" id="row1" data-target=".row1">
            <td><i class="glyphicon glyphicon-plus"></i></td>
            <td>data</td>
            <td>data</td>  
            <td>data</td>
        </tr>
        <tr class="collapse row1">
            <td>- child row</td>
            <td>data</td>
            <td>data</td>  
            <td>data</td>
        </tr>
        <tr class="clickable collapse row1" data-toggle="collapse" id="row3" data-target=".row3">
            <td>- child row</td>
            <td>data</td>
            <td>data</td>  
            <td>data</td>
        </tr>
        <tr class="collapse row3">
        <td>- grandchild row</td>
            <td>data</td>
            <td>data</td>  
            <td>data</td>
        </tr>
        <tr class="clickable" data-toggle="collapse" id="row2" data-target=".row2">
            <td><i class="glyphicon glyphicon-plus"></i></td>
            <td>data</td>
            <td>data</td>  
            <td>data</td>
        </tr>
        <tr class="collapse row2">
            <td>- child row</td>
            <td>data 2</td>
            <td>data 2</td>  
            <td>data 2</td>
        </tr>
        <tr class="collapse row2">
            <td>- child row</td>
            <td>data 2</td>
            <td>data 2</td>  
            <td>data 2</td>
        </tr>
    </tbody>
</table>

由于某种原因无法使用fiddle.js ..但如果您转到该链接并复制并粘贴此代码，则可以复制该问题。