切换具有主子项详细信息的html表的可见性

Question

我有一个显示主孩子详细信息的html表。
单击主记录上的加号（+）时，将显示相应的子详细信息。我在这里进行了测试设置http://jsfiddle.net/BEEU3/3/。 （这不完美）
我知道如何遍历dom以获取子元素，但请建议一个能够产生最佳性能的解决方案。

HTML：

<table class="table table-bordered">
<tr>
 <th></th>
 <th>Name</th>
 <th>Details</th>
</tr>
    <tr>
        <td><i class="icon-plus-sign"></i></td>
        <td>name1</td>
        <td>detail1</td>
    </tr>
    <tr class="tr-child">
        <td colspan="3">
            <table class="table table-bordered">
                <tr>
                    <th>SubDetails</th>
                    <th>SubDetails</th>
                </tr>
                <tr>
                    <td>SD1</td>
                    <td>Test1</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

jQuery的：

$(".icon-plus-sign").click(function () {
      $('.tr-child').toggle("slow");
});

Answer 1

您可以使用closest()和next()方法。首先closest()找到被点击元素的最接近的tr父项，然后next()选择tr元素的下一个兄弟，这是一个类为.tr-child的元素。

$(".icon-plus-sign").click(function () {
     $(this).closest('tr').next().toggle("slow");
});

<强> Fiddle

• 的 closest()
• 的 next()