<!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><jQuery> 七. 手风琴案例
原文地址：https://www.cnblogs.com/ZeroHour/p/8257711.html