<!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. 【原创】9. MYSQL++中的Field、FieldNames以及FieldTypes类型

    mysqlpp::Field其实使用的并不多,主要在于Result.h中ResultBase以及他的派生类型(UseQueryResult和StoreQueryResult)的几个获取下一个field ...

  2. day63-webservice 03.解析cxf提供的例子

    Path配置: C:\Program Files (x86)\ScanSign;E:\app\zhongzh\product\11.2.0\dbhome_1\bin;D:\app\zhongzh\pr ...

  3. javascript实现新浪微博MID与地址转换

    新浪微博每一条微博都会有一个mid,然后每条微博都有一个独立的地址,例如:http://www.weibo.com//Bw3SXzWzP 规律:地址中的黄色部分是用户id,绿色部分是微博的识别字符串, ...

  4. Java AOP 注解配置与xml配置

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  5. 面试题:SpringMVC的工作流程

    SpringMVC是当今最主流的Web MVC框架,没有之一,要做一名合格的JavaWeb工程师,学好它势在必行! 与Struts2原理不同,SpringMVC是通过最基础最传统的servlet来实现 ...

  6. c语言学习笔记 break语句

    比如 for() { for() { break; } } 那个break语句只是跳出它所在的那个for循环,不会把最外面的for循环都跳出去.

  7. Installing R under Unix-alikes

    Linux上R的安装 可参考https://cran.r-project.org/doc/manuals/r-release/R-admin.html#Installing-R-under-Unix_ ...

  8. Android Tablayout属性介绍

    1.添加依赖 compile 'com.android.support:design:26.0.0-alpha1' 2.属性 改变选中字体的颜色app:tabSelectedTextColor=&qu ...

  9. 合成（Composite）模式

    一. 合成(Composite)模式 合成模式有时又叫做部分-整体模式(Part-Whole).合成模式将对象组织到树结构中,可以用来描述整体与部分的关系. 合成模式可以使客户端将单纯元素与复合元素同 ...

  10. Java集合类总结 （二）

    LinkedList类 由于基于数组的链表有一个大的缺点,那就是从链表中间移除一个元素时需要将此元素后面的所有元素向前移动,会产生大量的开销,同样的在链表中间插入一个新元素也会有大量开销.如下图: L ...