zoukankan      html  css  js  c++  java
  • 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其他的隐藏的效果。

  • 相关阅读:
    Training: WWW-Robots
    Training: Stegano I
    Encodings: URL
    利用Nginx实现域名转发 不修改主机头
    C++删除目录和复制目录函数
    获取文件大小的函数
    日志打印函数
    拉起上级目录程序
    安卓TabHost页面
    有趣的人形时钟
  • 原文地址:https://www.cnblogs.com/cuculus/p/8032143.html
Copyright © 2011-2022 走看看