Jquery 同個類名中點擊的顯示其他隱藏的效果


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM