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

时间: 2024-08-28 00:32:26

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

jQuery将物体居中,并且转换显示和隐藏

今天来给大家贴一段代码,代码的作用就是利用jQuery将物体居中,并且转换显示和隐藏: 首先建立一个div标签并且写好css样式,具体如下 然后我想要的效果是当我点击了button这个按钮,test可以居中显示,第二次点击一次test消失,第三次点击又居中显示,这样循环下去: 具体js代码如下: 稍微解释一下代码的意思: 1.$('#test').get(0).flag = true;是为了建立一个标识,告诉浏览器什么时候应该显示,什么时候应该隐藏 2.上面的top就是让浏览器窗口的高度减去自己

点击按钮显示或隐藏图片

<!-- 一种简单的方法 jquery的show/hide也可以 或者jquery中的toggleClass()方法 --> <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击显示或隐藏图片</title> <style> .show{ display: block; } .hide

JQuery采用CSS实现DOM元素的显示和隐藏

今天参加了一个Code Review活动,看了一个同事的写的代码,感觉满足了当前的功能实现,但是从长远来看,无论从代码复用角度还是维护上看都显得非常差.先看看需求是什么吧.需求是通过下拉框的选择不同的选项,来显示和隐藏一个文本框.同事是这样写的: Code 1 <select name="select" onChange="disinput(this)"> <option value="1">1</option>

AngularJS中实现显示或隐藏动画效果的3种方式

本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-animage→依赖:var app = angular.module("app",["ngAnimate"]);→controller中一个变量接收bool值→界面中提供一个按钮,点击改变bool值→界面中显示/隐藏的区域提供ng-if和controller中的bool值绑定

jquery点击区域显示或隐藏DIV,点击非该DIV的地方隐藏该DIV

<div class="Content_top"> <div class="Reserve"> <h3><span class="current">散租自驾</span><span>商务代驾</span><span> </span><span> </span><span> </span><

利用jquery 实现菜单控制对应视图的显示与隐藏

效果: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="./js/jquery-1.12.4.min.js" ></s

[jquery] 遮罩弹窗,点击遮罩弹窗自动隐藏

$("#id_sign_forbidden_win .c-content").click(function(event){ event.stopPropagation(); // 阻止点击事件的冒泡 }); $("#id_sign_forbidden_win").bind("click" , function(eventBody){ $("#id_sign_forbidden_win").hide(); });

js第一天 点击按钮显示与隐藏

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" > window.onload=function(){ var weibo=document.getElementById('weibo'); var content=document

点击按钮显示和隐藏图片精简方法

using UnityEngine;using System.Collections; public class HideOrShowImg : MonoBehaviour { public GameObject Img; void Start() { Img.SetActive(false); } public void HideOrShow() { Img.SetActive(!Img.activeSelf); }} 给button指定好点击事件