<!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. OK6410&nbsp;linux系统遇到的BUG总结

    经过一段时间使用OK6410 256M RAM 2G nand Flash碰见了不少问题. 所以特意开本贴一起交流.大家有什么BUG解决的可以跟上本帖.求助的请另开贴.勿跟本帖.谢谢.请谅解!!! 希 ...

  2. SqlServer数据导入到ORACLE

    ORACLE中执行 select * from SYSTEM."employ_epl"

  3. zookeeper伪集群的搭建

    由于公司服务器数量的限制,我们往往没有那么多的服务器用来搭建zookeeper的集群,所以产生了伪集群的搭建,也就是将多个zookeeper搭建在同一台机器上. 准备工作: 1,一台服务器,我们这里用 ...

  4. centos7 qt之程序编译 cant start process “cmake”

    之所以出现这个问题,是由于qt内置的cmake与系统已安装的cmake命令冲突.解决的方法是,在build里将cmake命令加上绝对路径. 问题得以解决.

  5. 【bzoj1455】罗马游戏

    1455: 罗马游戏 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1061  Solved: 439[Submit][Status][Discuss] ...

  6. js通过session判断登录与否并确定跳转页面以及回车按钮提交

    本文实例讲述了js判断登录与否并确定跳转页面的方法.分享给大家供大家参考.具体如下: 使用session存储,确定用户是否登录,从而确定页面跳转至哪个页面. 判断本地有无customerID func ...

  7. C++中内存区域的划分

    栈存储区 那些由编译器在需要的时候分配,在不需要的时候自动清楚的变量的存储区.里面的变量通常是局部变量.函数参数等. 堆存储区(自由存储区) 那些由new或者malloc分配的内存块,他们的释放编译器 ...

  8. opennebula 对接创建模板参数

    { "id": 8, "name": "c5d1390c-1930-45a5-a686-5cef38b319d7", "displ ...

  9. SqlServer—大话函数依赖与范式

    说明:数据库中的某些概念真的很让人头疼,概念的东西本来就是很枯燥的,再加上枯燥的学习,那就更加枯燥了.概念这东西,你不理解也能生产东西,经验多了就行,但是为了更深入的学习,你还必须理解.这里,我抛开书 ...

  10. Bean管理注解的例子