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

时间:2014-08-01 07:53:52

标签: jquery

我使用这个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(仅隐藏第二个表格)

谢谢!

编辑: 感谢您Stigertrigger('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 个答案:

没有答案