1.筛选器做左侧菜单实例
筛选器如下：
//当前点击的标签 $(this);
//获取某个标签的下一个标签
//获取某个标签的父标签，
//获取父亲的所有兄弟标签，
//添加样式移除样式
//$('.i1').addClass('hide')
//$('.i1').removeClass('hide')
//var v=$(this+"div") this+"div"组合有问题
//筛选器，在所有选到的标签中再进行一次筛选
$(this).next() 下一个
$(this).prev() 上一个
$(this).parent() 父亲
$(this).children() 孩子
$(this).siblings() 兄弟
$('#i1').find('#i1') 子子孙孙中查找
2.
<!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;200px;border-color:1px solid #dddddd">
<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>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function(){
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.content').addClass('hide');
})
</script>
</body>
</html>
两行可以并成一行,jquery 支持链式编程。
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')