<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    * {padding: ;margin: ;}

    ul { list-style-type: none;}

    .parentWrap {

      width: 200px;

      text-align:center;

    }

    .menuGroup {

      border:1px solid #;

      background-color:#e0ecff;

    }

    .groupTitle {

      display:block;

      height:20px;

      line-height:20px;

      font-size: 16px;

      border-bottom:1px solid #ccc;

      cursor:pointer;

    }

    .menuGroup > div {

      height: 200px;

      background-color:#fff;

      display:none;

    }

  </style>

  <script src="jquery-1.12.4.js"></script>

  <script>

     $(function () {

       $(".groupTitle").click(function () {

         $(this).next("div").slideDown().parent().siblings().children("div").slideUp();

       })

     })

  </script>

</head>

<body>

<ul class="parentWrap">

  <li class="menuGroup">

    <span class="groupTitle">标题1</span>

    <div>我是弹出来的div1</div>

  </li>

  <li class="menuGroup">

    <span class="groupTitle">标题2</span>

    <div>我是弹出来的div2</div>

  </li>

  <li class="menuGroup">

    <span class="groupTitle">标题3</span>

    <div>我是弹出来的div3</div>

  </li>

  <li class="menuGroup">

    <span class="groupTitle">标题4</span>

    <div>我是弹出来的div4</div>

  </li>

</ul>

</body>

</html>

元素查找：$(this).next("div")查找当前下面的div元素

获取父元素：$(this).next("div").parent()

获取父元素的其他元素：$(this).next("div").parent().sibings()

获取父元素下面的子元素：$(this).next("div").slideDown(200).parent().siblings().children("div")

动画效果：slideDown sildeup

jquery查找子元素和兄弟元素的更多相关文章

  1. jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

  2. Jquery下控制backgroundPosition位置的问题/jquery查找data id相等的元素

    1:想通过控制backgroundPosition 来实现动态效果: $(this).animate({"background-positionY":-13},1); //但是火狐 ...

  3. UI自动化通过文字、父子元素，兄弟元素定位

    在百度首页,通过文字,父子元素,兄弟元素进行定位 一.文字定位: 通过界面上的文字进行定位,注意如果同一个页面上存在多个同样的文字的情况,返回的值会是多个,建议只存在一个情况下才用这方法. 如:定位百 ...

  4. js或jquery如何获取父级、子级、兄弟元素(包括祖级、孙级等)

    原生javascript方法: var a = document.getElementById("dom"); del_space(a); //清理空格 var b = a.chi ...

  5. js和jquery获取父级元素、子级元素、兄弟元素的方法

    最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~ [js的获取方式] function dom(){      var a = document.getElementByIdx ...

  6. 转载：js和jquery获取父级元素、子级元素、兄弟元素的方法

    转载网址: 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元 ...

  7. js和jquery获取父级元素、子级元素、兄弟元素的方法{转}

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当成DOM元素   原生的 ...

  8. jquery获取父级元素、子级元素、兄弟元素的方法

    jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(&q ...

  9. 记录--jquery 获取父级、子级、兄弟元素 + 实例

    需求如下: 三条数据,需点击其中一条数据在其下面展示与此数据关联的图片.主要功能可能是在点击的数据下增加显示行 思路: 把需要点击增加的数据先隐藏.点击后再将其显示出来. 知识点: jQuery.pa ...

随机推荐

  1. const&nbsp;int&nbsp;*pi与int&amp;nbs…

    此质料是摘要:<<彻底搞定C 指针 >>,自己感觉比较有价值,现与大家分享. 1. 从const int i 说起 你知道我们声明一个变量时象这样int i :这个i是可能在它 ...

  2. web页面在ios下不支持fixed可用absolute替代的方案

    本文引用出处:http://www.cnblogs.com/PeunZhang/p/3553020.html. 对于 ios4 和 android2.2 以下不支持 position:fixed 的问 ...

  3. 分布式缓存产品Redis和memcached比较区别（图）

  4. Linux 程序和进程的关系

    查看进程命令 ps  ps -elf|grep init|grep -v grep 查看init进程ID号:ps aux |grep init |grep -v grep; ps aux 会把系统所有 ...

  5. Docker学习之路（二）DockerFile详解

    Dockerfile是一个镜像的表示,可以通过Dockerfile来描述构建镜像的步骤,并自动构建一个容器 所有的 Dockerfile 命令格式都是: INSTRUCTION arguments 虽 ...

  6. 6.AND & OR 运算符

    AND 和 OR 运算符用于基于一个以上的条件对记录进行过滤 AND 和 OR 运算符 AND 和 OR 可在 WHERE 子语句中把两个或多个条件结合起来. 如果第一个条件和第二个条件都成立,则 A ...

  7. What’s the Difference Between a Value Provider and Model Binder?

    ASP.NET MVC 3 introduced the ability to bind an incoming JSON request to an action method parameter, ...

  8. Java 扫描器类 Scanner类

    1.Scanner是SDK1.5新增的一个类,可是使用该类创建一个对象.Scanner reader=new Scanner(System.in); 2.reader对象调用下列方法(函数),读取用户 ...

  9. memset函数使用

    函数原型 void *memset(void *s,int c,size_t n): 功能 将已开辟内存空间 s 的首 n 个字节的值设为值 c. 头文件  #include<memory.h& ...

  10. 获取下标实现导航切换jquery代码

    var lis = $(".proDetail_contentnav li");for(var i = 0; i < lis.length; i++) { lis[i].in ...