Chinaunix首页 | 论坛 | 博客

stray82的ChinaUnix博客stray.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

stray82

  • 博客访问： 326707
  • 博文数量： 206
  • 博客积分： 1040
  • 博客等级： 少尉
  • 技术积分： 1756
  • 用 户 组： 普通用户
  • 注册时间： 2012-04-09 17:22
文章分类

全部博文（206）

文章存档

2015年（3）

2014年（147）

2013年（2）

2012年（54）

我的朋友
最近访客
推荐博文
相关博文
左边框伸缩代码1

分类： 系统运维

2012-04-11 17:48:11


 

点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""">
  2. <html xmlns="" xml:lang="en-us">
  3. <head>
  4. <title>用jquery写一个菜单伸缩效果</title>
  5. <script src=""></script>
  6. <script>
  7. jQuery(document).ready(function(){
  8.    jQuery("dd:not(:first)").hide();
  9.         jQuery("dt a").click(function(){
  10.         jQuery("dd:visible").slideUp("slow");
  11.        jQuery(this).parent().next().slideDown("slow");
  12.         return false;
  13.     });
  14. });
  15. </script>
  16. <style>
  17. body { font-family: Arial; font-size: 16px; margin: 0 auto; text-align: center; }
  18. dl,dt,dd,ul {margin: 0; padding: 0;}
  19. dl{margin-top: 150px;}
  20. dt { margin-top: 2px;}
  21. dt a {display: block; width: 300px; height: 30px; line-height: 30px;text-align: left; font-size: 18px; padding-left: 5px; color: #FFF; background: #73C5E5;}
  22. dd {width: 303px; border: 1px solid #73C5E5;}
  23. ul li{list-style: none; padding: 5px; text-align: left; }
  24. </style>
  25. </head>
  26. <body>
  27. <dl>
  28.     <dt><a href="#">jQuery</a></dt>
  29.     <dd>
  30.         <ul>
  31.             <li><a href="#">Download</a></li>
  32.             <li><a href="#">Documentation</a></li>
  33.            <li><a href="#">Blog</a></li>
  34.        </ul>
  35.     </dd>
  36.     <dt><a href="#">JavaScript</a></dt>
  37.     <dd>
  38.         <ul>
  39.             <li><a href="#">Mailing List</a></li>
  40.             <li><a href="#">Tutorials</a></li>
  41.             <li><a href="#">Demos</a></li>
  42.             <li><a href="#">Plugins</a></li>
  43.         </ul>
  44.     </dd>
  45.     <dt><a href="#">WordPress</a></dt>
  46.    <dd>
  47.         <ul>
  48.             <li><a href="#">Themes</a></li>
  49.             <li><a href="#">plugins</a></li>
  50.             <li><a href="#">languages</a></li>
  51.         </ul>
  52.     </dd>
  53.     <dt><a href="#">Themes</a></dt>
  54.     <dd>
  55.         <ul>
  56.             <li><a href="#">BlueSky</a></li>
  57.             <li><a href="#">Maxthon v2.0</a></li>
  58.             <li><a href="#">simple-line</a></li>
  59.         </ul>
  60.     </dd>
  61. </dl>
  62. </body>
  63. </html>


 

阅读(755) | 评论(0) | 转发(0) |
0

上一篇：jquery网页效果收集

下一篇：布局设置

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6