HTML javascript：扩展功能错误地更改了关卡

Question

问题在下图中解释。点击＆＃34;参数1＆＃34;的扩展功能后，＆＃34;参数2＆＃34;将会改变，如中图所示。但实际上它应该保持在同一水平。

任何建议都非常感谢。提前谢谢。

JAVASript

$('.P1').click(function() {
  $(this).find('span').text(function(_, value) {
    return value == '-' ? '+' : '-'
  });
  $(this).closest('tr').nextUntil('tr:has(.P2)').slideToggle(100, function() {});
});

$('.Sub-parameter-1').click(function() {
  $(this).find('span').text(function(_, value) {
    return value == '-' ? '+' : '-'
  });
  $(this).closest('tr').nextUntil('tr:has(.Sub-parameter-2)').slideToggle(100, function() {});
});

HTML

<table width="200" border="1">
  <tr>
    <td rowspan="6">Summary </td>
    <td colspan="3">
      <div align="center">1 st level</div>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <div class="P1"><span>-</span>Parameter 1</div>
    </td>
  </tr>
  <tr>
    <td rowspan="3">L1</td>
    <td colspan="2"><div class="Sub-parameter-1"><span>-</span>Sub parameter (1)</div></td>
  </tr>
  <tr>
    <td>L2</td>
    <td>description</td>
  </tr>
  <tr>
    <td colspan="2"><div class="Sub-parameter-2"><span>-</span>Sub parameter (2)</td>
  </tr>
  <tr>
    <td colspan="3">
      <div class="P2">Parameter 2</div>
    </td>
  </tr>
</table>

JSFiddle ：https://jsfiddle.net/gft08cmb/4/

根据回答编辑

当将答案应用于超过1行的子参数时，则＆＃34;参数2＆＃34;仍会改变其在以下链接中所见的水平。

https://jsfiddle.net/gka7312L/或https://jsfiddle.net/p2a2wxfv/1/

Answer 1

你的rowspan attribute in L1出现了问题，因为它应该从3改为2，然后再回到你的案例中。

这可以按照我的想法运作：https://jsfiddle.net/gft08cmb/6/

如果你的数据也是动态的，你当然应该让它变得动态。 所以可能是行数等，然后根据此操作。

如果您需要进一步的帮助，请告诉我。