html-table - jQuery - 表 3 上的 Accordion 效果

Question

我在自定义此代码时遇到了一些麻烦，我尝试制作一个具有滚动效果的 Accordion 表，我通过教程使用了一些代码，当我单击标题时，两个表关闭。我只需要保持一处打开，另一处关闭。

这是一个演示 http://jsfiddle.net/cdvfn/4/

这里是脚本// Accordion

$( '.tablescroll_head' ).click(function() {
  $( '.tablescroll_wrapper').slideUp()
    .toggle();
});

这是我的 html

<table id="thetable" cellspacing="0">
  <thead>
    <tr>
      <td>city</td>
      <td>state code</td>
      <td>zip</td>
      <td>latitude</td>
      <td>longitude</td>
      <td>county</td>
    </tr>
    <tr>

    </tr>
  </thead>
  <tbody>
    <tr class="first">
      <td>Holtsville</td>
      <td>NY</td>
      <td>00501</td>
      <td>40.8152</td>
      <td>-73.0455</td>
      <td>Suffolk</td>
    </tr>
    <tr>
      <td>Holtsville</td>
      <td>NY</td>
      <td>00544</td>
      <td>40.8152</td>
      <td>-73.0455</td>
      <td>Suffolk</td>
    </tr>
    <tr>
      <td>Adjuntas</td>
      <td>PR</td>
      <td>00601</td>
      <td>18.1788</td>
      <td>-66.7516</td>
      <td>Adjuntas</td>
    </tr>
    <tr>
      <td>Aguada</td>
      <td>PR</td>
      <td>00602</td>
      <td>18.381389</td>
      <td>-67.188611</td>
      <td>Aguada</td>
    </tr>
    <tr>
      <td>Aguadilla</td>
      <td>PR</td>
      <td>00603</td>
      <td>18.4554</td>
      <td>-67.1308</td>
      <td>Aguadilla</td>
    </tr>
    <tr>
      <td>Aguadilla</td>
      <td>PR</td>
      <td>00604</td>
      <td>18.4812</td>
      <td>-67.1467</td>
      <td>Aguadilla</td>
    </tr>
    <tr>
      <td>Aguadilla</td>
      <td>PR</td>
      <td>00605</td>
      <td>18.429444</td>
      <td>-67.154444</td>
      <td>Aguadilla</td>
    </tr>
    <tr>
      <td>Maricao</td>
      <td>PR</td>
      <td>00606</td>
      <td>18.182778</td>
      <td>-66.980278</td>
      <td>Maricao</td>
    </tr>
    <tr>
      <td>Anasco</td>
      <td>PR</td>
      <td>00610</td>
      <td>18.284722</td>
      <td>-67.14</td>
      <td>Anasco</td>
    </tr>
    <tr>
      <td>Angeles</td>
      <td>PR</td>
      <td>00611</td>
      <td>18.286944</td>
      <td>-66.799722</td>
      <td>Utuado</td>
    </tr>
    <tr>
      <td>Arecibo</td>
      <td>PR</td>
      <td>00612</td>
      <td>18.4389</td>
      <td>-66.6924</td>
      <td>Arecibo</td>
    </tr>
    <tr>
      <td>Arecibo</td>
      <td>PR</td>
      <td>00613</td>
      <td>18.1399</td>
      <td>-66.6344</td>
      <td>Arecibo</td>
    </tr>
    <tr>
      <td>Arecibo</td>
      <td>PR</td>
      <td>00614</td>
      <td>18.1399</td>
      <td>-66.6344</td>
      <td>Arecibo</td>
    </tr>
    <tr>
      <td>Bajadero</td>
      <td>PR</td>
      <td>00616</td>
      <td>18.428611</td>
      <td>-66.683611</td>
      <td>Arecibo</td>
    </tr>
    <tr>
      <td>Barceloneta</td>
      <td>PR</td>
      <td>00617</td>
      <td>18.4525</td>
      <td>-66.538889</td>
      <td>Barceloneta</td>
    </tr>
  </tbody>
  </table>






<table id="theable" cellspacing="0">
  <thead>
    <tr>
      <td>city</td>
      <td>state code</td>
      <td>zip</td>
      <td>latitude</td>
      <td>longitude</td>
      <td>county</td>
    </tr>
    <tr>

    </tr>
  </thead>
  <tbody>
    <tr class="first">
      <td>Holtsville</td>
      <td>NY</td>
      <td>00501</td>
      <td>40.8152</td>
      <td>-73.0455</td>
      <td>Suffolk</td>
    </tr>
    <tr>
      <td>Holtsville</td>
      <td>NY</td>
      <td>00544</td>
      <td>40.8152</td>
      <td>-73.0455</td>
      <td>Suffolk</td>
    </tr>
    <tr>
      <td>Adjuntas</td>
      <td>PR</td>
      <td>00601</td>
      <td>18.1788</td>
      <td>-66.7516</td>
      <td>Adjuntas</td>
    </tr>
    <tr>
      <td>Aguada</td>
      <td>PR</td>
      <td>00602</td>
      <td>18.381389</td>
      <td>-67.188611</td>
      <td>Aguada</td>
    </tr>
    <tr>
      <td>Aguadilla</td>
      <td>PR</td>
      <td>00603</td>
      <td>18.4554</td>
      <td>-67.1308</td>
      <td>Aguadilla</td>
    </tr>
    <tr>
      <td>Aguadilla</td>
      <td>PR</td>
      <td>00604</td>
      <td>18.4812</td>
      <td>-67.1467</td>
      <td>Aguadilla</td>
    </tr>
    <tr>
      <td>Aguadilla</td>
      <td>PR</td>
      <td>00605</td>
      <td>18.429444</td>
      <td>-67.154444</td>
      <td>Aguadilla</td>
    </tr>
    <tr>
      <td>Maricao</td>
      <td>PR</td>
      <td>00606</td>
      <td>18.182778</td>
      <td>-66.980278</td>
      <td>Maricao</td>
    </tr>
    <tr>
      <td>Anasco</td>
      <td>PR</td>
      <td>00610</td>
      <td>18.284722</td>
      <td>-67.14</td>
      <td>Anasco</td>
    </tr>
    <tr>
      <td>Angeles</td>
      <td>PR</td>
      <td>00611</td>
      <td>18.286944</td>
      <td>-66.799722</td>
      <td>Utuado</td>
    </tr>
    <tr>
      <td>Arecibo</td>
      <td>PR</td>
      <td>00612</td>
      <td>18.4389</td>
      <td>-66.6924</td>
      <td>Arecibo</td>
    </tr>
    <tr>
      <td>Arecibo</td>
      <td>PR</td>
      <td>00613</td>
      <td>18.1399</td>
      <td>-66.6344</td>
      <td>Arecibo</td>
    </tr>
    <tr>
      <td>Arecibo</td>
      <td>PR</td>
      <td>00614</td>
      <td>18.1399</td>
      <td>-66.6344</td>
      <td>Arecibo</td>
    </tr>
    <tr>
      <td>Bajadero</td>
      <td>PR</td>
      <td>00616</td>
      <td>18.428611</td>
      <td>-66.683611</td>
      <td>Arecibo</td>
    </tr>
    <tr>
      <td>Barceloneta</td>
      <td>PR</td>
      <td>00617</td>
      <td>18.4525</td>
      <td>-66.538889</td>
      <td>Barceloneta</td>
    </tr>
  </tbody>
  </table>

Answer 1

问题是您需要将特定选择器定位到单击的选择器。所以改变

$( '.tablescroll_head' ).click(function() {
  $( '.tablescroll_wrapper').slideUp(); //This will select all wrappers and apply slide on them
    .toggle();
});

至

$('.tablescroll_head').click(function () {
    $(this).next().slideToggle(); //Select only the one that needs to be impacted.
});

<强> Demo