代码
<!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>展示
原文地址：https://blog.51cto.com/12965094/2373406
时间： 2024-10-08 14:33:34