夏日博客

A-A+

jQuery实现的折叠菜单效果代码

2016年01月12日 前端设计 暂无评论 阅读 4 views 次

折叠菜单效果我们在企业网站或分类中会常用到了，下面小编为各位整理了一个jQuery实现的折叠菜单效果代码供各位参考使用。

这是一款jQuery采用连缀写法实现的折叠菜单效果,代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title>1-5-1</title>  
  7. <style>  
  8. /** 清除内外边距 **/  
  9. body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */  
  10. dl, dt, dd, ul, ol, li, /* list elements 列表元素 */  
  11. pre, /* text formatting elements 文本格式元素 */  
  12. form, fieldset, legend, button, input, <a href="/tags.php/textarea/" target="_blank">textarea</a>, /* form elements 表单元素 */  
  13. th, td /* table elements 表格元素 */ {  
  14. margin: 0;  
  15. padding: 0;  
  16. }  
  17. body,button, input, <a href="/tags.php/select/" target="_blank">select</a>, textarea {  
  18. font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;  
  19. }  
  20. h1, h2, h3, h4, h5, h6 { font-size: 100%; }  
  21. address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */  
  22. code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */  
  23. small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */  
  24. ul, ol { list-style: none; }  
  25. /** 重置文本格式元素 **/  
  26. a { text-decoration: none; }  
  27. a:hover { text-decoration: underline; }  
  28. sup { vertical-align: text-top; } /* 重置，减少对行高的影响 */  
  29. sub { vertical-align: text-bottom; }  
  30. /** 重置表单元素 **/  
  31. legend { color: #000; } /* for ie6 */  
  32. fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */  
  33. button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承<a href="/tags.php/%D7%D6%CC%E5%B4%F3%D0%A1/" target="_blank">字体大小</a>  
  34.     
  35. */  
  36. /* 注：optgroup 无法扶正 */  
  37. /** 重置表格元素 **/  
  38. table { border-colla<a href="/fw/photo.html" target="_blank">ps</a>e: collapse; border-spacing: 0; }  
  39. </style>  
  40. <style type="text/css">  
  41. #menu{width:300px;overflow:hidden}  
  42. #menu dt{background:#ccc;color:#fff;cursor:pointer}  
  43. #menu dd{background:#f4f4f4;color:#fff;;display:none}  
  44. #menu dt.hover{background:green}  
  45. </style>  
  46. <script type="text/<a href="/js_a/js.html" target="_blank">javascript</a>" src="jquery1.3.2.js" ></script>  
  47. <script type="text/javascript">  
  48. $(function(){  
  49. $("dl").mouseover(function(){  
  50. $(this).children('dt').addClass('hover').end().children("dd").show();  
  51. $(this).siblings().children('dt').removeClass("hover").end().end().siblings().children  
  52.     
  53. ("dd").hide();  
  54. });  
  55. });  
  56. </script>  
  57. </head>  
  58. <body>  
  59. <div id="menu">  
  60. <dl>  
  61. <dt>第1章-认识jQuery</dt>  
  62. <dd><a href="#">1.1-JavaScript和JavaScript库</a></dd>  
  63. <dd><a href="#">1.2-加入jQuery</a></dd>  
  64. <dd><a href="#">1.3-编写简单jQuery代码</a></dd>  
  65. <dd><a href="#">1.4-jQuery对象和DOM对象</a></dd>  
  66. </dl>  
  67. <dl>  
  68. <dt>第2章-jQuery选择器</dt>  
  69. <dd><a href="#">2.1-jQuery选择器是什么</a></dd>  
  70. <dd><a href="#">2.2-jQuery选择器的优势</a></dd>  
  71. <dd><a href="#">2.3-jQuery选择器</a></dd>  
  72. <dd><a href="#">2.4-应用jQuery改写示例</a></dd>  
  73. </dl>  
  74. <dl>  
  75. <dt>第3章-jQuery中的DOM操作</dt>  
  76. <dd><a href="#">3.1-DOM操作的分类</a></dd>  
  77. <dd><a href="#">3.2-jQuery中的DOM操作</a></dd>  
  78. </dl>  
  79. </div>  
  80. </body>  
  81. </html>  
标签：

给我留言