当前位置： 代码迷 >> Web前端 >> 向下铺展菜单 隐藏展开菜单
  详细解决方案

向下铺展菜单 隐藏展开菜单

热度：673   发布时间：2013-12-06 17:56:43.0
向下展开菜单 隐藏展开菜单

注意本例用了一个图片，就是大类的图片menu.jpg,可以到演示页面下载

向下展开菜单 隐藏展开菜单
演示

?

?

XML/HTML Code
  1. <script>??
  2. ??????
  3. ????$(document).ready(function?()?{??
  4. ??????????
  5. ????????$('#accordion?a.item').click(function?()?{??
  6. ??
  7. ????????????//slideup?or?hide?all?the?Submenu??
  8. ????????????$('#accordion?li').children('ul').slideUp('fast');????
  9. ??????????????
  10. ????????????//remove?all?the?"Over"?class,?so?that?the?arrow?reset?to?default??
  11. ????????????$('#accordion?a.item').each(function?()?{??
  12. ????????????????if?($(this).attr('rel')!='')?{??
  13. ????????????????????$(this).removeClass($(this).attr('rel')?+?'Over');????
  14. ????????????????}??
  15. ????????????});??
  16. ??????????????
  17. ????????????//show?the?selected?submenu??
  18. ????????????$(this).siblings('ul').slideDown('fast');??
  19. ??????????????
  20. ????????????//add?"Over"?class,?so?that?the?arrow?pointing?down??
  21. ????????????$(this).addClass($(this).attr('rel')?+?'Over');???????????
  22. ??
  23. ????????????return?false;??
  24. ??
  25. ????????});??
  26. ??????
  27. ????});??
  28. ??????
  29. ????</script>??
  30. ??????
  31. ????<style>??
  32. ??????
  33. ????/*?First?Level?UL?List?*/??
  34. ????#accordion?{??
  35. ????????margin:0;??
  36. ????????padding:0;????
  37. ????????list-style:none;??
  38. ????}??
  39. ??????
  40. ????????#accordion?li?{??
  41. ????????????width:267px;??
  42. ????????}??
  43. ??????
  44. ????????#accordion?li?a?{??
  45. ????????????display:?block;??
  46. ????????????width:?268px;??
  47. ????????????height:?43px;?????
  48. ????????????text-indent:-999em;??
  49. ????????????outline:none;??
  50. ????????}??
  51. ??????????
  52. ????????/*?Using?CSS?Sprite?for?menu?item?*/??
  53. ????????#accordion?li?a.popular?{??
  54. ????????????background:url(menu.jpg)?no-repeat?0?0;???
  55. ????????}??
  56. ??
  57. ????????#accordion?li?a.popular:hover,?.popularOver?{??
  58. ????????????background:url(menu.jpg)?no-repeat?-268px?0?!important;???
  59. ????????}??
  60. ??????????
  61. ????????#accordion?li?a.category?{??
  62. ????????????background:url(menu.jpg)?no-repeat?0?-43px;???
  63. ????????}??
  64. ??
  65. ????????#accordion?li?a.category:hover,?.categoryOver?{??
  66. ????????????background:url(menu.jpg)?no-repeat?-268px?-43px?!important;???
  67. ????????}??
  68. ??????????
  69. ????????#accordion?li?a.comment?{??
  70. ????????????background:url(menu.jpg)?no-repeat?0?-86px;???
  71. ????????}??
  72. ??
  73. ????????#accordion?li?a.comment:hover,?.commentOver?{??
  74. ????????????background:url(menu.jpg)?no-repeat?-268px?-86px?!important;???
  75. ????????}??
  76. ??????????
  77. ??????????
  78. ????????/*?Second?Level?UL?List*/??
  79. ????????#accordion?ul?{??
  80. ????????????background:url(bg.gif)?repeat-y?0?0;??
  81. ????????????width:268px;??
  82. ????????????margin:0;??
  83. ????????????padding:0;??
  84. ????????????display:none;?????
  85. ????????}??
  86. ??????????
  87. ????????????#accordion?ul?li?{??
  88. ????????????????height:30px;??
  89. ????????????}??
  90. ??????????????
  91. ????????????/*?styling?of?submenu?item?*/??
  92. ????????????#accordion?ul?li?a?{??
  93. ????????????????width:240px;??
  94. ????????????????height:25px;??
  95. ????????????????margin-left:15px;??
  96. ????????????????padding-top:5px;??
  97. ????????????????border-bottom:?1px?dotted?#777;??
  98. ????????????????text-indent:0;??
  99. ????????????????color:#ccc;??
  100. ????????????????text-decoration:none;??
  101. ????????????}??
  102. ??
  103. ????????????/*?remove?border?bottom?of?the?last?item?*/??
  104. ????????????#accordion?ul?li?a.last?{??
  105. ????????????????border-bottom:?none;??
  106. ????????????}?????????
  107. ??????????
  108. ????</style>??
  109. ??
  110. ??
  111. <ul?id="accordion">??
  112. ????<li>??
  113. ????????<a?href="#"?class="item?popular"?rel="popular">Popular?Post</a>??
  114. ????????<ul>??
  115. ????????????<li><a?href="#">Popular?Post?1</a></li>??
  116. ????????????<li><a?href="#">Popular?Post?2</a></li>??
  117. ????????????<li><a?href="#"?class="last">Popular?Post?3</a></li>??
  118. ????????</ul>??
  119. ????</li>??
  120. ????<li>??
  121. ????????<a?href="#"?class="item?category"?rel="category">Category</a>??
  122. ????????<ul>??
  123. ????????????<li><a?href="#">Category?1</a></li>??
  124. ????????????<li><a?href="#">Category?2</a></li>??
  125. ????????????<li><a?href="#"?class="last">Category?3</a></li>??
  126. ????????</ul>??
  127. ????</li>??
  128. ????<li>??
  129. ????????<a?href="#"?class="item?comment"?rel="comment">Recent?Comment</a>??
  130. ????????<ul>??
  131. ????????????<li><a?href="#">Comment?1</a></li>??
  132. ????????????<li><a?href="#">Comment?2</a></li>??
  133. ????????????<li><a?href="#"?class="last">Comment?3</a></li>??
  134. ????????</ul>??
  135. ????</li>??
  136. </ul>??

?


原文地址:http://www.freejs.net/article_daohangcaidan_105.html

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.