如何在jQuery中使表默认关闭？

Question

我正在运行一个表的示例代码，默认情况下折叠，现在我通过打开表获得它，所以我的要求是显示表默认关闭，我的意思是+符号，如果我再次单击，我应该能够切换表。

null

$(document).ready(function() {
  $('tr.header').click(function() {
    $(this).find('span').text(function(_, value) {
      return value == '-' ? '+' : '-'
    });
    $(this).nextUntil('tr.header').slideToggle(100, function() {});
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-12 pt-5  pt-lg-5 order-2 order-lg-1">
  <h4 style="text-align:left;">teams at a accepted rate </h4>
  <tr class="header">
    <th colspan="2"> <span id="spantexttoggle">-</span></th>
  </tr>

  <table class="table table-bordered table-striped" align="center">
    <thead>
      <tr>
        <th scope="col">team1 </th>
        <th scope="col">team2 </th>
        <th scope="col">Team3 </th>
        <th scope="col">team4 </th>
        <th scope="col">team5 </th>
        <th scope="col">team6 </th>
        <th scope="col">team7 </th>
      </tr>
    </thead>
    <tbody>
      <td> accept</td>
      <td> accept</td>
      <td> accept</td>
      <td> accept</td>
      <td> accept</td>
      <td> accept</td>
      <td> accept</td>

    </tbody>
  </table>
</div>

null

Answer 1

代码的几个问题:

1. 您的在表之外
2. 不是要使用正确控件； 改用anchor或button元素
3. 还有，为什么在元素上调用click方法，而不是最初以正确的方式设置所有内容？ 还是仅仅因为你想在页面加载上有滑动效果？

我修复了JS代码，使展开/折叠（希望）按预期工作。 您应该注意使用正确的HTML标记和正确的元素。

代码:

null

$(document).ready(function() {
  $('#spantexttoggle').on('click', function() {
    $(this).text($(this).text() === '-' ? '+' : '-');
    $(this).next('table').slideToggle(100, function() {});
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-12 pt-5  pt-lg-5 order-2 order-lg-1">
  <h4 style="text-align:left;">teams at a accepted rate </h4>
  <span id="spantexttoggle">+</span>
  <table style="display:none;" class="table table-bordered table-striped" align="center">
    <thead>
      <tr>
        <th scope="col">team1 </th>
        <th scope="col">team2 </th>
        <th scope="col">Team3 </th>
        <th scope="col">team4 </th>
        <th scope="col">team5 </th>
        <th scope="col">team6 </th>
        <th scope="col">team7 </th>
      </tr>
    </thead>
    <tbody>
      <td> accept</td>
      <td> accept</td>
      <td> accept</td>
      <td> accept</td>
      <td> accept</td>
      <td> accept</td>
      <td> accept</td>

    </tbody>
  </table>
</div>