<!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. CSS鼠标手势大全

    实例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  2. 【光速使用开源框架系列】图片加载框架ImageLoader

    [关于本系列] 最近看了不少开源框架,网上的资料也非常多,但是我认为了解一个框架最好的方法就是实际使用.本系列博文就是带领大家快速的上手一些常用的开源框架,体会到其作用. 由于作者水平有限,本系列只会 ...

  3. 4-3 线程安全性-原子性-synchronized

    原子性它提供了互斥访问,同一时刻只能有一个线程来对它进行操作.能保证同一时刻只有一个线程来对其进行操作的,除了Atomic包之外,还有锁.JDK提供锁主要分两种,synchronized是一个Java ...

  4. 2014蓝桥杯B组初赛试题《李白打酒》

    题目描述: 话说大诗人李白,一生好饮.幸好他从不开车.     一天,他提着酒壶,从家里出来,酒壶中有酒2斗.他边走边唱: 无事街上走,提壶去打酒.     逢店加一倍,遇花喝一斗.     这一路上 ...

  5. jQuery基础教程-第8章-003Providing flexible method parameters

    一.The options object 1.增加阴影效果 (function($) { $.fn.shadow = function() { return this.each(function() ...

  6. easyui-tabs 页签绑定click事件，动态加载jqgrid

    .前台代码 <%-- builed by manage.aspx.cmt [ver:] at // :: --%> <%@ Page Language="C#" ...

  7. getchar() getch() getche() gets() puts() scanf()的用法及区别

    getchar() putchar(ch) scanf()   头文件stdio.h getch() getche()   头文件conio.h gets() puts()    头文件stdio.h ...

  8. 在VS2008和VS2010中禁用Visual Assist X

    此方法对于VS2008和VS2010 都适用. 在VS2008或VS2010菜单栏中选择“VassistX”选项卡,找到“Enable/Disable Visual Assist X”选项, 点击即可 ...

  9. 通过网页发布ios应用。

    原文地址:http://www.zhihu.com/question/24304345 两种方法: 1. 测试版本 支持任何类型的开发者帐号,需要在developer后台设置授权deviceID,可以 ...

  10. Java 起名规范

    注重代码编写规范: 1)都得遵循标识号的规范 2)不能以关键字,数字开头.也不要以拼音起名,最好用英文单词,单词组合来起名. 3)采用驼峰表示法,使用英文单词组合,单词首字母要大些,起到分割作用. - ...