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

Question

我想要像下面这样的默认折叠效果，而不是展开所有内容:

点击“参数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/

Answer 1

使用.closest()

喜欢这个

var _this = $(this);

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

DEMO