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

转载于:https://www.cnblogs.com/cuculus/p/8032143.html

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

jquery点击按钮显示和隐藏div
[转]jquery点击按钮显示和隐藏DIv 1 function changeDisplay() { 2 if ($("#btnShow").attr("value&qu ...
点击按钮显示或隐藏Div块
通过点击按钮实现Div块在显示状态与隐藏状态之间来回切换. 代码如下: 方法一: <!DOCTYPE html> <html> <head><script s ...
html 点击隐藏特效代码,vueJS简单的点击显示与隐藏的效果(实现代码)
下面小编就为大家带来一篇vueJS简单的点击显示与隐藏的效果[实现代码].小编觉得挺不错的,现在分享给大家,一起跟随小编过来看看吧目前前端框架太多,接触过angular.ember,现在开始倒腾vu ...
Android之按钮点击事件——显示图片隐藏图片
哈喽!时隔两个月,我又和大家见面啦! 今天,我要分享的内容一如既往的很基础,即关于Android的按钮点击事件--显示图片&&隐藏图片,它的执行过程比较简单,所以这里我就不放什么图片或 ...
【JavaWeb】JQuery实现广告显示和隐藏动画效果
我们经常会看到几秒后出现了广告,显示了几秒后广告就消失了,下面就用JQuery框架来实现这个功能. 代码如下: <!DOCTYPE html> <html> <head& ...
AngularJS中实现显示或隐藏动画效果的3种方式
本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果思路: →npm install angular-anima ...
html选择按键点击后锁死输入框_js实现的键盘开启大写锁定提示和密码显示与隐藏的效果...
不知道大家注意到没有,很多人性话的网站再输入密码的时候,如果开启大写锁定下过(切换键A左边的Cap Lock按键),那么就会给出一个提示,因为很多时候密码验证是区分大小写的,如果不小心开启或者关闭大小 ...
jQuery实现点击链接显示和隐藏二维码
1.新建一个html文档,一个css文档,一个js文档 2.二维码显示之前的图片 3.二维码显示之后的图片 4.html的代码 <ul class="t-con-r f-r" ...
点击按钮显示和隐藏图片
1.新建一个HTML文件以及css样式文件还有js 2.把css文件以及js引入HTML 3.写入一个div并设置类名 4.在div内写入一个img然后导入图片并给这个img设置类名以及id 5.在d ...

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

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

最新文章

热门文章