<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery3.js"></script>
<style>
.header{
background-color: blue;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div class="item">
<div class="header">标题一</div>
<div class="content hide">内容一</div>
<div class="content hide">内容一1</div>
</div>
<div class="item">
<div class="header">标题二</div>
<div class="content hide">内容二</div>
<div class="content hide">内容二</div>
</div>
<div class="item">
<div class="header">标题三</div>
<div class="content hide">内容三</div>
<div class="content hide">内容三</div>
</div>
</div>
<script>
$(".header").click(function () {
//当前点击的标签$(this)
//获取某个标签的下一个标签
//获取某个标签的父标签
//获取所有的兄弟标签
//添加样式和移除样式
//$('#i1').addClass('hide')
//$('#i1').removeClass('hide')
//筛选器
// $(this).next() 下一个
// $(this).prev() 上一个
// $(this).parent() 父
// $(this).children() 孩子
// $(this).siblings() 兄弟
// $(this).find('#i1') 子子孙孙中查找
//另外一种删除hide属性
// $(this).next().removeClass('hide');
// $(this).next().next().removeClass('hide');
$(this).siblings().removeClass('hide')
$(this).parent().siblings().find('.content').addClass('hide')
})
</script>
</body>
</html>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
