Jquery SlideToggle div在单独的表格行中

Question

当单击前一行中的链接时，我试图让一个滑动切换显示隐藏的表格行。我首先遇到了滑动不顺畅的问题，然后发现滑动切换不能很好地与表格行配合使用。因此，我将隐藏行中的内容粘贴在该行内的一个 div 中，并决定将其隐藏。我现在的问题是我似乎无法为 jquery 找出正确的代码来在行中找到该 div。

我在这里有一个 JSfiddle 示例：http://jsfiddle.net/yrM3H/811/

我的代码示例如下：

html:

<table>
    <tr>
        <td>
            <div class="hidden">Expanded!</div>
        </td>
    </tr>
    <tr>
        <td><div class="toggle">Content</div></td>
    </tr>
    <tr>
        <td>
            <div class="hidden">Expanded!</div>
        </td>
    </tr>
</table>

js:

jQuery(document).ready(function () {
    jQuery(".toggle").parent().parent().next().children().next(".hidden").hide();
    jQuery(".toggle").click(function () {
        $('.active').not(this).toggleClass('active').parent().parent().next().children().next('.hidden').slideToggle(300);
        $(this).toggleClass('active').parent().parent().next().children().next('.hidden').slideToggle("fast");
    });
});

Answer 1

$("td").click(function(){
         $(this).parent("tr").next("tr").find("td div.hidden").slideToggle();
    });

http://jsfiddle.net/kmd97/yrM3H/816/

Answer 2

这应该可以解决您的问题：http://jsfiddle.net/yrM3H/813/

我对其进行了更改，使其在第二行使用.find('hidden') 来查找子元素。之前，它根本没有找到元素。

附带说明 - 我不明白您为什么不使用 $('.hidden').hide(); 隐藏所有 .hidden 元素？