<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
min- 150px;
background-color: black;
color: white;
}
.hide{
display: none;
}
.content{
min-height: 50px;
}
</style>
</head>
<body>
<div style="border: 1px solid silver; 200px;height: 600px">
<div class="item">
<div class="header">标题一</div>
<div class="content">内容</div>
</div>
<div class="item">
<div class="header">标题二</div>
<div class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题三</div>
<div class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题四</div>
<div class="content hide">内容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function () {
// 当前点击的标签$(this)
// 获取某个一标签的下个标签
// 获取某一个标签的父标签
// 获取所有的兄弟标签
// 添加和移除样式
// removeClass('hide')移除样式、addClass('hide')添加样式
// var v = $('this + div')
// $('lable + input')
// console.log(v)
//筛选器
// $(this).next()下一个
// $(this).prev()上一个
// $(this).parents()父标签
// $(this).children()子标签
// $(this).siblings()兄弟标签
// $(this).find('.XXXX或#XXXX') 在子子孙孙中查找
// $(this)也可以特指某一个如$(.XXXX或者#XXXX) .代表class #代表id
// jQuery支持链式编程如下
// console.log($(this).next().removeClass('hide').parents().siblings().find('content').addClass('hide'))
$(this).next().removeClass('hide').parents().siblings().find('.content').addClass('hide')
// 上述面这句话的意思是：被点击的对象下面一个标签去掉hide样式，
// 在去掉样式的标签的父标签的兄弟中class=‘content’的标签让他再加上一个hide样式
})
</script>
</body>
</html>
效果如下图：
