HTML Javascript: 伸展收缩复杂表格bug

[rdfzfanghui]

如图所示，现在有2层伸展功能，但是问题是在展开所有内容后，想要收缩的时候，点击最高层的时候，只能收缩第二层，而不能将第二层和第三层全部收缩。图片显示的更清楚如果我解释的不清楚的话。不胜感激。

Jsfiddle：https://jsfiddle.net/knspgwkq/8/

HTML

<table width="200" border="1">
  <tr>
    <td rowspan="5">Summary 1</td>
    <td colspan="2"><div align="center">1 st level</div></td>
  </tr>
  <tr>
    <td colspan="2" data-collapsable-parent="1"><div class="P1">Parameter 1</div></td>
  </tr>
  <tr>
    <td data-collapsable-child="1" rowspan="2">Sub level-1 </td>
    <td data-collapsable-child="1" >Sub parameter (1)</td>
  </tr>
  <tr>
    <td data-collapsable-child="1" data-collapsable-parent="2" >Sub parameter (2)</td>
    <td data-collapsable-child="2" >Sub parameter (3)</td>
  </tr>

  <tr>
    <td colspan="2"><div class="P2">Parameter 2</div></td>
  </tr>
</table>

JAVAScript

$('[data-collapsable-parent]').click(function(){
var child = $(this).attr("data-collapsable-parent");
  $('[data-collapsable-child="'+ child + '"]').toggle('slow');
    });

CSS

 [data-collapsable-child] {
   display: none;
 }