jquery扩展表没有以隐藏的方式启动

Question

我正在尝试制作一个可扩展的表格，其中许多行都有一个按钮，您可以按此按钮切换每行的子行。这似乎是有效的，但我希望它从子行关闭开始。我怎么能这样做？

$(document).ready(function() {
  $('.RowToClick').click(function() {
    $(this).nextAll('tr').each(function() {
      if ($(this).is('.RowToClick')) {
        return false;
      }
      $(this).toggle();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>


<table border=0>
  <tr class="RowToClick">
    <td><button>+</button></td>
    <td>hello</td>
  </tr>

  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
</table>

<table border=0>
  <tr class="RowToClick"><button>+</button></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
</table>

<table border=0>
  <tr class="RowToClick"><button>+</button></tr>
  <tr><td>Data Row 1 Goes Here...</td></tr>
  <tr><td>Data Row 2 Goes Here...</td></tr>
  <tr><td>Data Row 3 Goes Here...</td></tr>
  <tr><td>Data Row 4 Goes Here...</td></tr>
  <tr><td>Data Row 5 Goes Here...</td></tr>
</table>

Answer 1

在tr

中添加td

<tr class="RowToClick">
    <td>
        <button>+</button>
    </td>
    <td>hello</td>
</tr>

<强> DEMO

<强> CSS

.RowToClick ~ tr{
    display :none;
}

Answer 2

只需在jquery中添加一行

$('.RowToClick').nextAll('tr').toggle();

并将Rowname放在相同的TD按钮

中

<td><button>+</button> Row 1</td>

所以它看起来像

$(document).ready(function() {
  $('.RowToClick').nextAll('tr').toggle();
  $('.RowToClick').click(function() {
    $(this).nextAll('tr').each(function() {
      if ($(this).is('.RowToClick')) {
        return false;
      }
      $(this).toggle();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>


<table border=0>
  <tr class="RowToClick"><td><button>+</button> Row 1</td></tr>

  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
</table>

<table border=0>
  <tr class="RowToClick"><td><button>+</button> Row 2</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
  <tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
</table>

<table border=0>
  <tr class="RowToClick"><td><button>+</button> Row 3</td></tr>
  <tr><td>Data Row 1 Goes Here...</td></tr>
  <tr><td>Data Row 2 Goes Here...</td></tr>
  <tr><td>Data Row 3 Goes Here...</td></tr>
  <tr><td>Data Row 4 Goes Here...</td></tr>
  <tr><td>Data Row 5 Goes Here...</td></tr>
</table>