页面的DOM结构如下:
<tr> ...... <td><a href="javascript:void(0)" class="c_detail2">查看详情</a></td> </tr> <tr class="detail2"> <td class="intro" colspan="7"> ...... </td> </tr> <tr> ...... <td><a href="javascript:void(0)" class="c_detail2">查看详情</a></td> </tr> <tr class="detail2"> <td class="intro" colspan="7"> ...... </td> </tr>
为了做显示/隐藏之间来回切换,第一反应是使用toggle,
代码如下:
$(".c_detail2").click(function () { $(this).parent().parent().next().toggle(); });
结果点击显示出来后不切换隐藏的话,再继续点其他同类(c_detail2) 下的DOM,这个时候就出现了多个DOM(detail2)同时显示的情况,于是做了如下调整:
$(".c_detail2").click(function () { // $(this).parent().parent().next().toggle(); $(this).parent().parent().next().toggle().siblings('.detail2').hide(); });
这样就达到了点击哪个,只显示一个同类DOM其他的隐藏的效果。