Question

我使用这个jQuery脚本：

  $(function() {
      $(".accordionjquery tr:not(.lineclic)").hide();
      $(".accordionjquery tr:first-child").show();
      $(".accordionjquery tr.lineclic").click(function(){
          $(this).nextAll("tr").fadeToggle(100);
      }).eq(0).trigger('click');
  });

我的HTML脚本：

<table class="accordionjquery">
  <tr class="lineclic">
    <th>First Table</th>
    <th></th>
  </tr>
  <tr>
    <td>HIDE1</td>
    <td></td>
  </tr>
  <tr>
    <td>HIDE2</td>
    <td></td>
  </tr>
  <tr>
    <td>HIDE3</td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2"><%= pie_chart @chart_enc %></td>
  </tr>
</table>
<table class="accordionjquery">
  <tr class="lineclic">
    <th>Second Table</th>
    <th></th>
  </tr>
  <tr>
    <td>HIDE1</td>
    <td></td>
  </tr>
  <tr>
    <td>HIDE2</td>
    <td></td>
  </tr>
  <tr>
    <td>HIDE3</td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2"><%= pie_chart @chart_enc %></td>
  </tr>
</table>

有很多这样的表格。

当我的页面被加载时，我希望每个表都被隐藏，除了第一个tr（带有lineclic类），最后一个带有pie_chart。

已加载页面：

<table class="accordionjquery">
  <tr class="lineclic">
    <th>First Table</th>
    <th></th>
  </tr>
  <tr>
    <td colspan="2"><%= pie_chart @chart_enc %></td>
  </tr>
</table>
<table class="accordionjquery">
  <tr class="lineclic">
    <th>First Table</th>
    <th></th>
  </tr>
  <tr>
    <td colspan="2"><%= pie_chart @chart_enc %></td>
  </tr>
</table>

当我点击第一行时，会出现另一个tr！

pie_chart不支持resizing，因为它不会重新加载。

您可以尝试：JSFiddle（仅隐藏第二个表格）

谢谢！

编辑： 感谢您Stiger（trigger('click')已删除）以获取每个表格并关闭＃34; ：

  $(function() {
      $(".accordionjquery tr:not(.lineclic)").hide();
      $(".accordionjquery tr:first-child").show();
      $(".accordionjquery tr.lineclic").click(function(){
          $(this).nextAll("tr").fadeToggle(100);
      }).eq(0);
  });

现在，如何显示header and the last tr (with the rails script : pie_chart)？

手风琴对许多桌子的影响，只是第一个和最后一个元素

0 个答案: