<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> <script> $(function () { // 隐藏所有的div $(".parentWrap>li>div").hide(); // 注册事件span $(".groupTitle").click(function () { // 链式编程, 在jQuery里, 方面可以一直调用下去 $(this).next().show().parent().siblings().children("div").hide(100); }); }); </script> </head> <body> <ul class="parentWrap"> <li class="menuGroup"> <span class="groupTitle">标题1</span> <div>我是弹出来的div1</div> </li> <li class="menuGroup"> <span class="groupTitle">标题2</span> <div>我是弹出来的div2</div> </li> <li class="menuGroup"> <span class="groupTitle">标题3</span> <div>我是弹出来的div3</div> </li> <li class="menuGroup"> <span class="groupTitle">标题4</span> <div>我是弹出来的div4</div> </li> </ul> </body> </html>