Question

我有一个从php循环生成的表，以便Toggled行具有相同的类。当我点击切换以显示一条记录的详细信息时，它会切换到所有其他记录。

这有点令人困惑。所以我试着在这里创建一个jsfiddle。

<table border=1px>
<tr>
    <td>MR A</td><td><a class='showit' href='#'>2 records</a></td>
</tr>
<tr class='details'>
    <td colspan='2'>record 1....</td>
</tr>
<tr class='details'>
    <td colspan='2'>record 2....</td>
</tr>
 <tr>
    <td>MR B</td><td><a class='showit' href='#'>1 records</a></td>
</tr>
<tr class='details'>
    <td colspan='2'>record 1....</td>
</tr>

</table>
<script>
$(document).ready(function(){
$(".details").hide();
$(".showit").click(function(){
    $(".details").toggle();
});
});
</script>

问题是当我点击显示mR A的记录时，它还会显示mR B的记录。有没有解决方法？非常感谢......

Answer 1

您可以捕获单击的行并检索具有类详细信息的所有后续行：

$(".showit").click(function(){
    $(this).closest("tr") // Retrieves the tr that was clicked
           .nextUntil(":not(.details)") // Gets all the following tr's that have the detail class
           .toggle();
});

更新了小提琴：http://jsfiddle.net/bxfw05s5/1/

Jquery toggle（）只需要表行

1 个答案: