HTML javascript：expand函数不正确地更改级别关系 [英] HTML javascript: expanding function changes the level relationship incorrectly

问题描述

问题解释如下图所示。一旦单击参数1的扩展功能，参数2的电平将会改变，如中间图片所示。但实际上它应该保持在同一水平。

The problem is explained in the picture below. Once clicking the expanding function of "Parameter 1", the level of "Parameter 2" will change as seen in the middle picture. But actually it should remain in the same level.

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

Any suggestion is highly appreciated. Thanks in advance.

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/

基于回答的EDIT

当将参数应用于超过1行的子参数时，参数2

When applying the answer to more than 1 row of sub parameter, then the "Parameter 2" still changes its level seen in following link.

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

推荐答案

您的 L1中的rowspan属性从3到2，回来在你的情况。

Your rowspan attribute in L1 is making problems since it should change from 3 to 2 and back in your case.

这样的工作方式与我想的一样： https： //jsfiddle.net/gft08cmb/6/

This works as you would want I think: https://jsfiddle.net/gft08cmb/6/

如果你的数据也是动态的，你当然应该动态。
所以可能是一个行数等，然后根据这个操作。

You should of course make it dynamic if your data is going to be dynamic also. So probably a count of rows etc. and then manipulate based on this.

如果您需要进一步的帮助，请与我们联系。

Let me know if you need further help.

这篇关于HTML javascript：expand函数不正确地更改级别关系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！