slideToggle表格行

Question

根据this post，滑动效果现在适用于表格。我试图找到一种方法来实现下面的代码中的slideToggle功能。

下面的代码正确地删除/显示指定的内容，但它没有使用幻灯片动作。

位于上述帖子中的jsfiddle通过在div中放置td解决了他们的情况，因此对于我的情况，我试图在div内放置<tr> {1}}解决我的情况，但它无法正常工作。

$(".one").on('click', function() {
    $(this).nextAll('.two:first').slideToggle(); 
}); 

.one{
    background: orange;
    cursor: pointer;
}
.two{
    background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr class="one">
        <td> Hello </td>
    </tr>
     <tr>
        <td> world </td>
    </tr>
    <tr class="two">
        <td> Foo <br> foo </td>
    </tr>
    <tr class="two">
        <td> Bazz </td>
    </tr>
    <tr class="one">
        <td> Hello </td>
    </tr>
    <tr class="two">
        <td> Bar<br>bar </td>
    </tr>
</table>

Answer 1

您需要将td元素中的内容包装在div中，然后您可以执行以下操作：

$(this).nextAll('.two:first').find('div').slideToggle();

DEMO

Answer 2

我不知道您是否会在代码中添加更多列，但我建议您使用＆lt;表＆gt;只有当您想要展示的信息需要它时。

例如，在您在此处发布的代码中，您可以（应该）使用＆lt; div>使用 display：inline-block; 和 margin：0 auto;

类似的东西：

<div class="one"> Hello </div>
<div class="one"> world </div>
<div class="two"> Foo <br> foo </div>
etc...

如果您需要使用表格，那么@SarahBourt发布的链接可能是您的最佳选择。