单击时在元素中切换 +/-答案

【问题标题】：Toggle +/- in element on click单击时在元素中切换 +/-
【发布时间】：2022-01-06 14:50:21
【问题描述】：

我有一个 table，展开和折叠功能已经可以使用，但我想添加 + 和 - 按钮以使功能更加动态。谁能帮我解决这个问题？

$('tr.header').click(function() {
  $(this).nextUntil('tr.header').css('display', function(i, v) {
    return this.style.display === 'table-row' ? 'none' : 'table-row';
  });
});

tr {
  display: none;
}

tr.header {
  display: table-row;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="0">
  <tr class="header">
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header">
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

http://jsfiddle.net/5cdh4L23/

【问题讨论】：

感谢您编辑罗里！我正在学习英语，有时我的语法有点混乱。
你的英语完全没有问题，我真正添加的只是sn-p :)

标签： javascript html jquery css

【解决方案1】：

要执行您需要的操作，您可以将span 元素添加到.header 单元格以包含+ 或-。当点击发生时，您可以根据字符的当前值交换字符。

还请注意，您可以使用 CSS 类来显示 tr 元素，因为您可以使用 toggleClass() 代替 css() 中的三元组，从而使 JS 更简洁。

$('tr.header').click(function() {
  $(this)
    .find('span').text((i, t) => t === '+' ? '-' : '+').end()
    .nextUntil('tr.header').toggleClass('show');
});

tr { display: none; }
tr.show { display: table-row; }
tr.header { display: table-row; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table border="0">
  <tr class="header">
    <td colspan="2">Header <span>+</span></td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header">
    <td colspan="2">Header <span>+</span></td>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

【讨论】：