javascript - javascript:复杂表格的默认折叠功能不起作用

我希望具有如下所示的默认折叠效果，而不是扩展所有内容：



单击“参数1”后，它还将具有如下所示的默认效果：



当前的“ $（'＃problematicRowspan'）。hide（）;”还没有工作。请帮助，在此先感谢。

JS

$('.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() {});
  var rows = parseInt($('#problematicRowspan').attr('rowspan'));
  if(rows == 4) {
     rows-=2;
     $('#problematicRowspan').hide();   //here not works
  }
  else {
    rows+=2;
    $('#problematicRowspan').show();      //here not works
  }
  $('#problematicRowspan').attr('rowspan', rows);
});

的HTML

<table width="200" border="1">
  <tr>
    <td rowspan="7">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 id="problematicRowspan" rowspan="4">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>L2</td>
    <td>description1</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>

https://jsfiddle.net/7tvgnw22/

最佳答案

使用.closest()

像这样

var _this = $(this);

 _this.closest("#problematicRowspan").hide();

DEMO

关于javascript - javascript:复杂表格的默认折叠功能不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34734587/