想要在点击任何一个父元素时隐藏其他父母的孩子

Question

我想隐藏每个父元素的所有子元素，期望那些被点击的子元素，意味着当我点击任何一个父元素切换其子元素时，其他父元素的子元素必须隐藏。

我无法更改HTML。

任何人都能给我一些想法，拜托，谢谢你的帮助。

function toggleChild(classVal){
    var x = document.getElementsByClassName(classVal);
    for(var i=0;i<x.length;i++){
        if (x[i].style.display == "none") {
            x[i].style.display = "block";
        } else {
            x[i].style.display = "none";
        }
    }
}

<table>
  <tbody>
    <tr onclick="toggleChild('child1')"><td>PARENT1</td></tr>
    <tr>
      <td>
        <table>
          <tbody>
            <tr class="child1" style="display:none"><td>I AM CHILD OF PARENT1</td></tr>
            <tr class="child1" style="display:none"><td>I AM CHILD OF PARENT1</td></tr>
            <tr onclick="toggleChild('child2')"><td>PARENT2</td></tr>
            <tr class="child2" style="display:none"><td>I AM CHILD OF PARENT2</td></tr>
            <tr class="child2" style="display:none"><td>I AM CHILD OF PARENT2</td></tr>
            <tr class="child2" style="display:none"><td>I AM CHILD OF PARENT2</td></tr>
            <tr onclick="toggleChild('child3')"><td>PARENT3</td></tr>
            <tr class="child3" style="display:none"><td>I AM CHILD OF PARENT3</td></tr>
            <tr class="child3" style="display:none"><td>I AM CHILD OF PARENT3</td></tr>
            <tr class="child3" style="display:none"><td>I AM CHILD OF PARENT3</td></tr>
            <tr onclick="toggleChild('child4')"><td>PARENT4</td></tr>
            <tr class="child4" style="display:none"><td>I AM CHILD OF PARENT4</td></tr>
            <tr class="child4" style="display:none"><td>I AM CHILD OF PARENT4</td></tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>