javascript - 表格行的 SlideToggle

Question

根据this post滑动效果现在可以很好地与 table 配合使用。我正在尝试找出一种在下面的代码中实现 SlideToggle 功能的方法。

下面的代码正确地删除/显示指定的内容，但它不是通过滑动 Action 来实现的。

jsfiddle位于上述帖子中通过放置 div 解决了他们的情况td内，所以对于我的情况，我尝试输入 div里面<tr>来解决我的情况，但它不起作用。

$(".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

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

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

DEMO