javascript - 使用主子详细信息切换 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");
});

小提琴

• 最接近（）
• 下一个（）