<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color: blue;
color: white;
}
.content{
min-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height: 400px;width: 80px;border: 1px solid red">
<div class="item">
<div class="header">标题1</div>
<div class="content">内容</div>
</div>
<div class="item">
<div class="header">标题2</div>
<div class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题3</div>
<div class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题4</div>
<div class="content hide">内容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function () {
// $(this).next() 下一个
// $(this).prev() 上一个
// $(this).parent() 父类
// $(this).children() 孩子
// $(this).siblings() 兄弟
// $(this).find(''#i1) 子子孙孙中查找
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
})
</script>
</body>
</html>
jQurey实现隐藏菜单示例
猜你喜欢
转载自blog.51cto.com/1662659/2125537
今日推荐
周排行