JQuery实现简单的QQ风格

   现在QQ已经成为我们生活中必不可少的聊天工具，在QQ界面中会呈现有“我的好友”、“陌生人”、“黑名单”选项，当单击时将会被打开，现在我们将用JQuery实现这种效果。下面请看代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         ul
 7         {
 8             list-style-type: none;
 9         }
10         .hander
11         {
12             background-color: Red;
13             cursor: pointer;
14         }
15         .body
16         {
17             border-color: Blue;
18             border-width: 1px;
19             border-style: solid;
20         }
21     </style>
22 
23     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
24 
25     <script type="text/javascript">
26         $(function() {
27             $("#qq li:odd").addClass("body");
28             $("#qq li:even").addClass("hander").click(function() {
29                 $(this).next("li.body").show("slow").siblings("li.body").hide("slow");
30             });
31             $("#qq li:first").click();
32         });
33     </script>
34 
35 </head>
36 <body>
37     <ul id="qq">
38         <li>我的好友</li>
39         <li>张三<br />
40             李四<br />
41         </li>
42         <li>我的同学</li>
43         <li>拉登<br />
44             小奥<br />
45         </li>
46         <li>陌生人</li>
47         <li>疯子<br />
48             小猫<br />
49         </li>
50     </ul>
51 </body>
52 </html>

    在写此程序时必须分析效果将如何实现。这里使用的是ul。程序中的37~50行是html代码，这里将表头（我的好友、我的同学）为li的奇数行，而具体的人物名称为偶数行。在第5~20行为css。hander表示奇数的li的样式，body表示偶数行的样式。
    JQuery中，先为ul的奇数行和偶数行分别添加自己的样式；在单击表头时（奇数行的li），将紧挨着自己的偶数行的li显示，其他的偶数行的li隐藏。

posted @ 2012-06-11 09:13  孙进  阅读(1157)  评论(0)  编辑  收藏  举报