案例需求
点击分组，只能保证有一个为打开状态，点击自己有开和关的功能。
代码实例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 //使用筛选函数实现 10 $("div").children("a").hide().prev("span").click(function(){ 11 $(this).nextAll("a").toggle().parent().siblings("div").find("a").hide(); 12 }); 13 }); 14 </script> 15 16 <style type="text/css"> 17 div *{ 18 display:block; 19 width:200px; 20 } 21 div span{ 22 background-color : #0f0; 23 } 24 </style> 25 </head> 26 <body> 27 28 <div> 29 <span>我的家人</span> 30 <a>爸爸</a> 31 <a>妈妈</a> 32 <a>哥哥</a> 33 <a>姐姐</a> 34 </div> 35 <div> 36 <span>我的朋友</span> 37 <a>二狗子</a> 38 <a>狗蛋儿</a> 39 <a>三胖子</a> 40 <a>铁蛋儿</a> 41 </div> 42 <div> 43 <span>508宿舍</span> 44 <a>教授</a> 45 <a>阿樊</a> 46 <a>阿杨</a> 47 <a>强哥</a> 48 </div> 49 50 </body> 51 </html>