代码

<!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>展示