Question

我有一张表，其中一行有一个子表。当班级与班级＆＃34;显示＆＃34;点击我想：

让子表可见......滑动它。
从＆＃34;显示＆＃34;更改锚类。到＆＃34;隐藏＆＃34;。

我该怎么做？

我的代码如下：

<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

你想这样吗？

参见演示：

我使用了toggle()

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

Answer 2

您需要将.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/

显示/隐藏和幻灯片表

2 个答案: