頁面的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其他的隱藏的效果。