Jquery Expand和College Html表

Question

我在页面上为html表实现展开和折叠功能时遇到了问题

我有以下html结构

<table class='css1' style='width:550px;' border='0'>
<tbody>
<tr><td class='heading'><span id="lblpreferredtype1">Preferred Type</span></td></tr>
<tr><td class='both'><br><select name="ddcontrol1" id="ddcontrol1">
<option selected="selected" value="DATABASE">DATABASE 444</option>
<option value="Value2">Value2</option>
</select><br /><br />
</td></tr>
</tbody></table>
<table class='css1' style='width:550px;' border='0'>
<tbody>
<tr><td class='heading'><span id="lblpreferredtype2">Preferred Type2</span></td></tr>
<tr><td class='both'><br><select name="ddcontrol2" id="ddcontrol2">
<option selected="selected" value="DATABASE">DATABASE 123</option>
<option value="Value2">Value2</option>
</select><br /><br />
</td></tr>
</tbody></table>
<table class='css1' style='width:550px;' border='0'>
<tbody>
<tr><td class='heading'><span id="lblpreferrednum1">Preferred Number1</span></td></tr>
<tr><td class='both'><br><select name="ddcontrol3" id="ddcontrol3">
<option selected="selected" value="DATABASE">DATABASE2</option>
<option value="Value2">Value2</option>
</select><br /><br />
</td></tr>
</tbody></table>
<table class='css1' style='width:550px;' border='0'>
<tbody>
<tr><td class='heading'><span id="lblpreferredsamp1">Preferred Sample1</span></td></tr>
<tr><td class='both'><br><select name="ddcontrol4" id="ddcontrol4">
<option selected="selected" value="DATABASE">DATABASE1</option>
<option value="Value2">Value2</option>
</select><br /><br />
</td></tr>
</tbody></table>

现在我想实现以下

1. 如果我点击任何表格的标题行（），那么只有标题行应保持可见，该表格的所有以下行都应隐藏。
2. 当我再次点击同一标题行时，它应该再次可见。

我尝试过以下操作，但我无法使其正常工作，有些隐藏了表格的下方部分，但它删除了页面上的所有下表。

例如，如果我点击顶部的表格“Heading”行，它也会隐藏下面的所有表格，而我想隐藏仅我点击的表格的行

<script>
           $( function() {
               $('.heading').click(function () {

                  // $(this).nextUntil('tr.heading').slideToggle(1000);
                   $(this).nextUntil('heading').toggle();
                  // $(this).toggle();
                  // $(this).siblings().not(this).hide(); // hide the siblings of the clicked row

               });
           } );
  </script>

任何人都可以帮助我理解我的错误。

Answer 1

由于.heading是＆lt; td＆gt;的类，您应该切换其父＆lt; tr＆gt;的所有下一个兄弟节点，如下所示：

$('.heading').click(function() {
  $(this).parent().nextAll().toggle();
});

$('.heading').click(function() {
  $(this).parent().nextAll().toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='css1' style='width:550px;' border='0'>
  <tbody>
    <tr>
      <td class='heading'><span id="lblpreferredtype1">Preferred Type</span>
      </td>
    </tr>
    <tr>
      <td class='both'>
        <br>
        <select name="ddcontrol1" id="ddcontrol1">
          <option selected="selected" value="DATABASE">DATABASE 444</option>
          <option value="Value2">Value2</option>
        </select>
        <br />
        <br />
      </td>
    </tr>
  </tbody>
</table>
<table class='css1' style='width:550px;' border='0'>
  <tbody>
    <tr>
      <td class='heading'><span id="lblpreferredtype2">Preferred Type2</span>
      </td>
    </tr>
    <tr>
      <td class='both'>
        <br>
        <select name="ddcontrol2" id="ddcontrol2">
          <option selected="selected" value="DATABASE">DATABASE 123</option>
          <option value="Value2">Value2</option>
        </select>
        <br />
        <br />
      </td>
    </tr>
  </tbody>
</table>
<table class='css1' style='width:550px;' border='0'>
  <tbody>
    <tr>
      <td class='heading'><span id="lblpreferrednum1">Preferred Number1</span>
      </td>
    </tr>
    <tr>
      <td class='both'>
        <br>
        <select name="ddcontrol3" id="ddcontrol3">
          <option selected="selected" value="DATABASE">DATABASE2</option>
          <option value="Value2">Value2</option>
        </select>
        <br />
        <br />
      </td>
    </tr>
  </tbody>
</table>
<table class='css1' style='width:550px;' border='0'>
  <tbody>
    <tr>
      <td class='heading'><span id="lblpreferredsamp1">Preferred Sample1</span>
      </td>
    </tr>
    <tr>
      <td class='both'>
        <br>
        <select name="ddcontrol4" id="ddcontrol4">
          <option selected="selected" value="DATABASE">DATABASE1</option>
          <option value="Value2">Value2</option>
        </select>
        <br />
        <br />
      </td>
    </tr>
  </tbody>
</table>