Question

我在定制这段代码时遇到了一些麻烦，我尝试制作一个带滚动效果的手风琴表，我通过教程做了一些代码，当我点击两个表格的标题时关闭。我只需要保持一个开放，一个关闭。

这里的脚本 //手风琴

$( '.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

jQuery - 表3中的手风琴效果

1 个答案: