如何显示祖父母的兄弟姐妹的目标？

Question

我想知道如何让父母的兄弟姐妹成为目标。

当button.btn被点击的时候，我想要的是toggleSlide tr.show-hide。

1. https://codepen.io/raion/pen/dybxmLK?editors=1111
2. https://codepen.io/raion/pen/dybxmLK

我可以用ID一个接一个地做，但我想知道如何为每个按钮编写一个函数，以防我需要超过20或30个按钮。

<table>
  <tr class="toggle">
    <td> <button class="btn">toggle1</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----1111------</td>
  </tr>

  <tr class="toggle">
    <td> <button class="btn">toggle2</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----2222------</td>
  </tr>

</table>

<table class="table1">
  <tr class="table1__row">
    <th>table 1 - th1 </th>
    <td>table 1 - td </td>
  </tr>

  <tr class="table1__row">
    <th>table 1 - th2 </th>
    <td>

      <table class="table2">
        <tr class="table2__row toggle">
        <th> table 2 - th1</th>
          <td> <button class="btn">toggle1</button></td>
        </tr>

        <tr class="show-hide">
          <th></th>
          <td>-----1111------</td>
        </tr>

        <tr class="table2__row toggle">
          <th> table 2 - th2 </th>
          <td> <button class="btn">toggle2</button> </td>
        </tr>

        <tr class="show-hide">
          <th></th>
          <td>-----2222------</td>
        </tr>

      </table>

    </td>
  </tr>
</table>

Answer 1

下面是一个篡改你的代码 (两个表中的按钮)

在单击实际切换本身时，我更改了jQuery代码以侦听单击事件。

接下来，你在你的小提琴里错过了表演/隐藏风格：

.show-hide.active { display: table-row;; }

​

$(".toggle").on("click", function() {
  $(this).nextUntil(".toggle").toggleClass("active")
})

table {
   border-collapse: collapse;
  border:1px solid #000;
}

th, td {
  padding : 1em;
}

.table1__row > th {
  background : lemonchiffon;
  border: 1px solid black;
}

.table1__row > td {
  background : #DDD;
  border: 1px solid black;
}

.table2__row > th {

}
.show-hide {
   display: none;
}

.show-hide.active {
  display: table-row;;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table1">
  <tr class="table1__row">
    <th>table 1 - th1 </th>
    <td>table 1 - td </td>
  </tr>

  <tr class="table1__row">
    <th>table 1 - th2 </th>
    <td>
      
      <table class="table2">
        <tr class="table2__row toggle">
        <th> table 2 - th1</th>
          <td> <button class="btn">toggle1</button></td>
        </tr>

        <tr class="show-hide">
          <th></th>
          <td>-----1111------</td>
        </tr>

        <tr class="table2__row toggle">
          <th> table 2 - th2 </th>
          <td> <button class="btn">toggle2</button> </td>
        </tr>

        <tr class="show-hide">
          <th></th>
          <td>-----2222------</td>
        </tr>

      </table>

    </td>
  </tr>


</table>

​

Answer 2

如果有多行，nextUntil()就是您想要的。如果只是一行，则只需要next()。

​

$("table").on("click", ".toggle", function() {
  $(this).nextUntil(".toggle").toggleClass("active")
})

.show-hide {
  display: none;
}

.show-hide.active {
  display: table-row;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="toggle">
    <td> <button class="btn">toggle1</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----1111------</td>
  </tr>

  <tr class="toggle">
    <td> <button class="btn">toggle2</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----2222------</td>
  </tr>

  <tr class="toggle">
    <td> <button class="btn">toggle3</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----3a------</td>
  </tr>
  <tr class="show-hide">
    <td>-----3b------</td>
  </tr>

  <tr class="toggle">
    <td> <button class="btn">toggle4</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----4------</td>
  </tr>

</table>

​