显示/隐藏和幻灯片表

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/