设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 972|回复: 0

[jQuery/Js/AJAX] 目录树折叠菜单 (无限级) jquery版

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2014-11-12 09:07:55 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
目录树折叠菜单 (无限级) jquery版
本文关键字词:目录树,折叠菜单,目录树折叠菜单,jquery目录树,jquery折叠菜单

效果截图:
效果演示.png

源码:
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>目录树折叠(无限级)</title>
  6. <style type="text/css">
  7. ul{list-style:none;padding:0;}
  8. #menu .tree1{padding:14px 14px 14px 39px;color:#6F93FF;font-size:16px;font-family:"黑体";border-bottom:solid 1px #eee;}
  9. #menu #tree_root{overflow:auto;}
  10. #menu #tree_root li span{display:block;height:18px;line-height:18px;color:#222;cursor:pointer;}
  11. #menu #tree_root li span.tree2{padding:6px 6px 6px 20px;}
  12. #menu #tree_root li span.tree3{padding:6px 6px 6px 34px;}
  13. #menu #tree_root li span.tree4{padding:6px 6px 6px 48px;}
  14. #menu #tree_root li span.tree5{padding:6px 6px 6px 62px;}
  15. #menu li .hover,#menu li span:hover{background-color:#e9edf6;}
  16. #menu ul{overflow:hidden;}
  17. #menu ul li b{font-weight:normal;position:relative;padding-left:16px;}
  18. #menu ul li b:before{display:block;font-size:0;top:5px;left:0;content:"";width:4px;height:4px; border:solid 1px transparent;transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);position:absolute;}
  19. #menu ul li .On:before,#menu ul li .On2Off:before{top:3px;border-bottom-color:#999;border-right-color:#999;}
  20. #menu ul li .Off:before{top:5px;border-top-color:#999;border-right-color:#999;}
  21. #menu ul li .On2Off:before{transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);}
  22. </style>
  23. </head>
  24. <body>
  25. <div id="menu">
  26. <h1 class="tree1">文章模块</h1>
  27. <ul id="tree_root">
  28. <li>
  29. <span class="tree2"><b class="Off">一级分类</b></span>
  30. <ul style="display:none;">
  31. <li><span class="tree3"><b>二级分类</b></span></li>
  32. <li><span class="tree3"><b>二级分类</b></span></li>
  33. <li><span class="tree3"><b>二级分类</b></span></li>
  34. </ul>
  35. </li>
  36. <li>
  37. <span class="tree2"><b class="Off">一级分类</b></span>
  38. <ul style="display:none;">
  39. <li>
  40. <span class="tree3"><b class="Off">二级分类</b></span>
  41. <ul style="display:none;">
  42. <li><span class="tree4"><b>三级分类</b></span></li>
  43. <li><span class="tree4"><b>三级分类</b></span></li>
  44. <li><span class="tree4"><b>三级分类</b></span></li>
  45. </ul>
  46. </li>
  47. <li>
  48. <span class="tree3"><b class="Off">二级分类</b></span>
  49. <ul style="display:none;">
  50. <li><span class="tree4"><b>三级分类</b></span></li>
  51. <li><span class="tree4"><b>三级分类</b></span></li>
  52. <li>
  53. <span class="tree4"><b class="Off">三级分类</b></span>
  54. <ul style="display:none;">
  55. <li><span class="tree5"><b>四级分类</b></span></li>
  56. <li><span class="tree5"><b>四级分类</b></span></li>
  57. <li><span class="tree5"><b>四级分类</b></span></li>
  58. </ul>
  59. </li>
  60. </ul>
  61. </li>
  62. <li><span class="tree3"><b>二级分类</b></span></li>
  63. <li><span class="tree3"><b>二级分类</b></span></li>
  64. </ul>
  65. </li>
  66. <li>
  67. <span class="tree2"><b class="Off">一级分类</b></span>
  68. <ul style="display:none;">
  69. <li><span class="tree3"><b>二级分类</b></span></li>
  70. <li><span class="tree3"><b>二级分类</b></span></li>
  71. <li><span class="tree3"><b>二级分类</b></span></li>
  72. </ul>
  73. </li>
  74. </ul>
  75. </div>
  76. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  77. <script>
  78. $(function(){
  79. //目录树折叠按钮 -------------------------------
  80. function setTreeStyle(obj){
  81. var objStyle = obj.children("b");
  82. var objList = obj.siblings("ul");
  83. if(objList.length == 1){
  84. var style = objStyle.attr("class");
  85. objStyle.attr("class","On2Off");
  86. setTimeout(
  87. function(){
  88. if(style == "Off"){
  89. objList.parent().siblings("li").children("span").children(".On").each(function(){
  90. setTreeStyle($(this).parent());
  91. });
  92. var H = objList.innerHeight()
  93. objList.css({display:"block",height:"0"});
  94. objList.animate({height:H},300,function(){$(this).css({height:"auto"});});
  95. objStyle.attr("class","On");
  96. }
  97. else if(style == "On"){
  98. objList.find("li").children("span").children(".On").each(function(){
  99. setTreeStyle($(this).parent());
  100. });
  101. var H = objList.innerHeight()
  102. objList.animate({height:0},300,function(){$(this).css({height:"auto",display:"none"})});
  103. objStyle.attr("class","Off");
  104. }
  105. },
  106. 42
  107. );
  108. }
  109. }
  110. $("#tree_root").find("li").children("span").click(function(){
  111. setTreeStyle($(this));
  112. });
  113. // -----------------------------------------   
  114. })
  115. </script>
  116. </body>
  117. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-6 00:31

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表