筛选器:$(this).next() 下一个    $(this).prev  上一个    $(this).parent()  父     $(this).children() 孩     $(this).siblings() 获取兄弟标签    如: $(‘#i1’).siblings()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>biaoq</title>
<style>
.header{
background-color:black;
color:wheat;
}
.content{
min-height: 50px;
}
.hide{
display :none;
}
</style>
</head>
<body>
<div style='height:400px;width:200px;border:1px solid #ddddddddd'>
<div class='item'>
<div class='header'>标题一</div>
<div id='i1' 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="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script> <script>
$('.header').click(function(){
$(this).next().removeClass('hide')
$(this).parent().siblings().find('.content').addClass('hide')
//可以合并写成$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
})
</script>
</body>
</html>

 

addClass('hide')添加
removeClass('hide')移除
05-08 14:56