jQuery - 表3上的手風琴效果

Question

我在定製這段代碼時遇到了一點麻煩，我嘗試製作一個帶有滾動效果的手風琴表，我通過一個教程做了一些代碼，當我點擊兩個關閉表頭時。我只需要保持一個開放和一個封閉。

這裏是一個演示http://jsfiddle.net/cdvfn/4/

這裏腳本 //手風琴

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