JQuery实现简单的QQ风格

最新推荐文章于 2025-09-10 10:09:14 发布

weixin_30625691

最新推荐文章于 2025-09-10 10:09:14 发布

阅读量81

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/sun-sjmeng/archive/2012/06/11/2544565.html

本文介绍了一个使用JQuery实现QQ界面菜单效果的示例代码。通过分析效果实现方式，利用HTML和CSS布局，并结合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隐藏。

转载于:https://www.cnblogs.com/sun-sjmeng/archive/2012/06/11/2544565.html