jquery查找子元素和兄弟元素
2024-08-25 17:49:45
<!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
最新文章
- 开发维护大型 Java 项目的建议
- Memcached【Magent+Memcached】集群
- 在Coding.net创建项目开发
- React-非dom属性-dangerouslySetInnerHTML标签
- poj 1167 简单搜索
- ES5严格模式
- 【Tomcat】项目自动部署的链接重置错误
- 9、Cocos2dx 3.0游戏开发三查找值小工厂方法模式和对象
- HttpStack及其实现类
- openwrt的编译环境
- 2017-2-28 C#基础 数组
- VB6之切换桌面
- 搜索引擎case︱从搜索序列文本看高端商务车︱统计之都
- Redis分布式锁的try-with-resources实现
- django中的一对一、一对多、多对多及ForeignKey()
- golang 如何将imagemagick 和golang 打包到docker 环境中
- faiss索引基于数量级和内存限制的选择
- 微信支付 python版
- ZOJ 3886 Nico Number(筛素数+Love(线)Live(段)树)
- 常用oracle hints