1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <title></title> 4 <script src="jquery-1.8.3.min.js"></script> 5 <style type="text/css"> 6 #u1>li{ 7 border:1px solid blue; 8 cursor:pointer; 9 margin-bottom:5px; 10 background-color:orange; 11 } 12 #u1 li ul{ 13 margin:0px; 14 padding:0px; 15 } 16 #u1 li ul li{ 17 list-style-type:none; 18 /*border:1px solid yellow;*/ 19 text-align:center; 20 font-size:25px; 21 font-family:‘Kozuka Gothic Pr6N‘; 22 margin-bottom:10px; 23 background-color:pink; 24 } 25 26 27 </style> 28 29 <script type="text/javascript"> 30 $(function () { 31 $(‘#u1 li ul li‘).hide(); 32 $(‘#u1 li‘).click(function () { 33 $(‘ul li‘, $(this)).show(500); 34 $(‘ul li‘, $(this).siblings()).hide(500); 35 }); 36 37 }); 38 39 40 </script> 41 </head> 42 <body> 43 <div style="width:300px;border:1px solid red"> 44 <ul id="u1" style="list-style-type:none;margin:0;padding:0;text-align:center;font-size:30px;"> 45 <li> 46 幼儿园同学 47 48 <ul> 49 <li>小狗</li> 50 <li>小毛</li> 51 <li>小蛋</li> 52 <li>小鼻涕</li> 53 </ul> 54 </li> 55 <li> 56 小学同学 57 58 <ul> 59 <li>二狗</li> 60 <li>二毛</li> 61 <li>二蛋</li> 62 <li>二鼻涕</li> 63 </ul> 64 </li> 65 <li> 66 中学同学 67 68 <ul> 69 <li>三狗</li> 70 <li>三毛</li> 71 <li>三蛋</li> 72 <li>三鼻涕</li> 73 </ul> 74 </li> 75 76 </ul> 77 </div> 78 </body> 79 </html>
14JQuery笔记-----------------------同学通讯录
原文：http://www.cnblogs.com/clcloveHuahua/p/5128000.html