<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li{list-style:none;} .header { background:red;cursor:pointer; } .body { background:blue;border:1px solid green; } </style> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#qq li:odd").addClass("body"); $("#qq li:even").addClass("header").click(function(){ $(this).next("li.body").show("fast").siblings("li.body").hide("fast"); }); }); </script> </head> <body> <ul id="qq"> <li>我的好友</li> <li>张三<br />李四</li> <li>我的同学</li> <li>王无<br />溜溜</li> <li>陌生人</li> <li>小狗<br />小猫</li> </ul> </body> </html>