码迷,mamicode.com
首页 > Web开发 > 详细

Jquery 同个类名中点击的显示其他隐藏的效果

时间:2017-12-13 14:30:26      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:blog   color   点击   效果   java   href   gpo   做了   代码   

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

Jquery 同个类名中点击的显示其他隐藏的效果

标签:blog   color   点击   效果   java   href   gpo   做了   代码   

原文地址:http://www.cnblogs.com/cuculus/p/8032143.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!