javascript - 想要在单击任一父元素时隐藏其他父元素

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>

Answer 1

我会给你的 child 上一堂普通课，然后你可以这样做:

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

.child {display:none;}

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