顯示/隱藏和幻燈片表

Question

我有一張桌子，其中一行有一張兒童桌子。 當點擊類「Show」的錨時，我想：

1. 使子表可見...滑動它。
2. 將錨類從「顯示」更改爲「隱藏」。

我該怎麼做？

我的代碼如下：

<table class="Parent"> 
    <tr> 
     <td class="Task"></td> 
     <td>Row1</td> 
    </tr> 
    <tr> 
    <td class="Task"><a class="Show">Show</a></td> 
    <td>Row 2 
     <table class="Child" style="display: none"> 
      <tr><td>Row1</td></tr> 
     <tr><td>Row2</td></tr> 
     </table> 
    </td> 
    </tr> 
</table> 

謝謝！

Answer 1

您需要包裹.Child在一個div，否則將其顯示爲table-cell，這將影響到幻燈片動畫。

$(document).ready(function(){ 
    $('.Show, .Hide').click(function(){ 
     var child = $(this).closest('tr').find('.Child').closest('div'); 

     if($(this).hasClass('Show')){ 
      $(this).removeClass('Show').addClass('Hide').html('Hide'); 
     }else{ 
      $(this).removeClass('Hide').addClass('Show').html('Show'); 
     } 

     child.slideToggle('fast'); 
    }); 
}); 

DEMO（WITH DIV）： http://jsfiddle.net/dirtyd77/ppgH9/9/

DEMO（無DIV）： http://jsfiddle.net/dirtyd77/ppgH9/8/

Answer 2

你想要這樣嗎？

見演示：

我已經使用toggle()

http://jsfiddle.net/KcRTm/3/