0

我有一个表，其中一行中有一个子表。当单击“显示”类的锚点时，我想：

  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>

谢谢你！

4

2 回答 2

1

你想要这样吗？

见演示：

我用过toggle()

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

于 2013-04-11T17:21:43.337 回答
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');
    });
});

演示（带 DIV）：http: //jsfiddle.net/dirtyd77/ppgH9/9/

演示（无 DIV）：http: //jsfiddle.net/dirtyd77/ppgH9/8/

于 2013-04-11T17:28:08.873 回答