jQuery实现的无限级树形菜单效果代码

最新推荐文章于 2024-07-28 20:27:10 发布

weixin_30270889

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量290

点赞数

文章标签： javascript xhtml json ViewUI

原文链接：http://www.cnblogs.com/lcf0916/p/9396667.html

版权

 
  <!DOCTYPE html PUBLIC  
  "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
  > 
 
  <html xmlns= 
  "http://www.w3.org/1999/xhtml" 
  > 
 
  <head> 
 
  <meta http-equiv= 
  "Content-Type" 
  content= 
  "text/html; charset=utf-8" 
  /> 
 
  <script type= 
  "text/javascript" 
  src= 
  "jquery-1.6.2.min.js" 
  ></script> 
 
  <title>JS无级树树形菜单</title> 
 
  <style type= 
  "text/css" 
  > 
 
  .menuTree{ margin-left:-30px;} 
 
  .menuTree div{ padding-left:30px;} 
 
  .menuTree div ul{ overflow:hidden; display:none; height:auto;} 
 
  .menuTree span{ display:block; height:25px; line-height:25px; padding-left:5px; margin:1px 0; cursor:pointer; border-bottom:1px solid 
  #CCC;} 
 
  .menuTree span:hover{ padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; outline: 0px !important; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#e6e6e6; color:#cf0404;} 
 
  .menuTree a{ color: 
  #333; text-decoration:none;} 
 
  .menuTree a:hover{ color: 
  #06F;} 
 
  .btn{ height:30px; margin-top:10px; border-bottom:1px solid 
  #CCC;} 
 
  </style> 
 
  </head> 
 
  <body> 
 
  <div class= 
  "btn" 
  > 
 
  <input name= 
  "" 
  type= 
  "button" 
  id= 
  "btn_open" 
  value= 
  "全部展开" 
  />   
 
  <input name= 
  "" 
  type= 
  "button" 
  id= 
  "btn_close" 
  value= 
  "全部收缩" 
  /> 
 
  </div> 
 
  <div id= 
  "menuTree" 
  class= 
  "menuTree" 
  ></div> 
 
  </body> 
 
  </html> 
 
  <script type= 
  "text/javascript" 
  > 
 
  var 
  json = [{ 
  "name" 
  : 
  "*a" 
  , 
  "list" 
  :[ 
 
  { 
  "name" 
  : 
  "**a" 
  , 
  "url" 
  : 
  "#a1" 
  }, 
 
  { 
  "name" 
  : 
  "**aa" 
  , 
  "list" 
  :[ 
 
  { 
  "name" 
  : 
  "***a" 
  , 
  "url" 
  : 
  "#a11" 
  },  { 
  "name" 
  : 
  "***aa" 
  , 
  "list" 
  :[ { 
  "name" 
  : 
  "****a" 
  , 
  "url" 
  : 
  "#a111" 
  },  { 
  "name" 
  : 
  "****aa" 
  , 
  "list" 
  :[ { 
  "name" 
  : 
  "*****a" 
  , 
  "url" 
  : 
  "#a1111" 
  },  { 
  "name" 
  : 
  "*****aa" 
  , 
  "url" 
  : 
  "#a1112" 
  } 
 
  ]} 
 
  ]}, 
 
  { 
  "name" 
  : 
  "***aaa" 
  , 
  "url" 
  : 
  "#a13" 
  }, 
 
  { 
  "name" 
  : 
  "***aaaa" 
  , 
  "url" 
  : 
  "#a14" 
  } 
 
  ] 
 
  }, 
 
  { 
  "name" 
  : 
  "**a" 
  , 
  "url" 
  : 
  "#a3" 
  } 
 
  ] 
 
  }, 
 
  { 
  "name" 
  : 
  "*b" 
  , 
  "list" 
  :[ 
 
  { 
  "name" 
  : 
  "**b" 
  , 
  "url" 
  : 
  "#b1" 
  }, 
 
  { 
  "name" 
  : 
  "**bb" 
  , 
  "list" 
  :[ 
 
  { 
  "name" 
  : 
  "****b" 
  , 
  "url" 
  : 
  "#b111" 
  }, 
 
  { 
  "name" 
  : 
  "****bb" 
  , 
  "url" 
  : 
  "#b112" 
  } 
 
  ] 
 
  }, 
 
  ] 
 
  }, 
 
  { 
  "name" 
  : 
  "*c" 
  , 
  "list" 
  :[ 
 
  { 
  "name" 
  : 
  "**c" 
  , 
  "url" 
  : 
  "#c1" 
  }, 
 
  { 
  "name" 
  : 
  "**cc" 
  , 
  "url" 
  : 
  "#c2" 
  } 
 
  ] 
 
  }, 
 
  { 
  "name" 
  : 
  "*d" 
  } 
 
  ] 
 
  /*递归实现获取无级树数据并生成DOM结构*/ 
 
  var 
  str =  
  "" 
  ; 
 
  var 
  forTree =  
  function 
  (o){ 
 
  for 
  ( 
  var 
  i=0;i<o.length;i++){ 
 
  var 
  urlstr =  
  "" 
  ; 
 
  try 
  { 
 
  if 
  ( 
  typeof 
  o[i][ 
  "url" 
  ] ==  
  "undefined" 
  ){ 
 
  urlstr =  
  "<div><span>" 
  + o[i][ 
  "name" 
  ] + 
  "</span><ul>" 
  ; 
 
  } 
  else 
  { 
 
  urlstr =  
  "<div><span><a href=" 
  + o[i][ 
  "url" 
  ] + 
  ">" 
  + o[i][ 
  "name" 
  ] + 
  "</a></span><ul>" 
  ;  
 
  } 
 
  str += urlstr; 
 
  if 
  (o[i][ 
  "list" 
  ] !=  
  null 
  ){ 
 
  forTree(o[i][ 
  "list" 
  ]); 
 
  } 
 
  str +=  
  "</ul></div>" 
  ; 
 
  } 
  catch 
  (e){} 
 
  } 
 
  return 
  str; 
 
  } 
 
  /*添加无级树*/ 
 
  document.getElementById( 
  "menuTree" 
  ).innerHTML = forTree(json); 
 
  /*树形菜单*/ 
 
  var 
  menuTree =  
  function 
  (){ 
 
  //给有子对象的元素加[+-] 
 
  $( 
  "#menuTree ul" 
  ).each( 
  function 
  (index, element) { 
 
  var 
  ulContent = $(element).html(); 
 
  var 
  spanContent = $(element).siblings( 
  "span" 
  ).html(); 
 
  if 
  (ulContent){ 
 
  $(element).siblings( 
  "span" 
  ).html( 
  "[+] " 
  + spanContent)  
 
  } 
 
  }); 
 
  $( 
  "#menuTree" 
  ).find( 
  "div span" 
  ).click( 
  function 
  (){ 
 
  var 
  ul = $( 
  this 
  ).siblings( 
  "ul" 
  ); 
 
  var 
  spanStr = $( 
  this 
  ).html(); 
 
  var 
  spanContent = spanStr.substr(3,spanStr.length); 
 
  if 
  (ul.find( 
  "div" 
  ).html() !=  
  null 
  ){ 
 
  if 
  (ul.css( 
  "display" 
  ) ==  
  "none" 
  ){ 
 
  ul.show(300); 
 
  $( 
  this 
  ).html( 
  "[-] " 
  + spanContent); 
 
  } 
  else 
  { 
 
  ul.hide(300); 
 
  $( 
  this 
  ).html( 
  "[+] " 
  + spanContent); 
 
  } 
 
  } 
 
  }) 
 
  }() 
 
  /*展开*/ 
 
  $( 
  "#btn_open" 
  ).click( 
  function 
  (){ 
 
  $( 
  "#menuTree ul" 
  ).show(300); 
 
  curzt( 
  "-" 
  ); 
 
  }) 
 
  /*收缩*/ 
 
  $( 
  "#btn_close" 
  ).click( 
  function 
  (){ 
 
  $( 
  "#menuTree ul" 
  ).hide(300); 
 
  curzt( 
  "+" 
  ); 
 
  }) 
 
  function 
  curzt(v){ 
 
  $( 
  "#menuTree span" 
  ).each( 
  function 
  (index, element) { 
 
  var 
  ul = $( 
  this 
  ).siblings( 
  "ul" 
  ); 
 
  var 
  spanStr = $( 
  this 
  ).html(); 
 
  var 
  spanContent = spanStr.substr(3,spanStr.length); 
 
  if 
  (ul.find( 
  "div" 
  ).html() !=  
  null 
  ){ 
 
  $( 
  this 
  ).html( 
  "[" 
  + v + 
  "] " 
  + spanContent); 
 
  } 
 
  });  
 
  } 
 
  </script> 
 
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-json-tree-style-menu-codes/

转载于:https://www.cnblogs.com/lcf0916/p/9396667.html

weixin_30270889

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现的无限级树形菜单效果代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>...
复制链接

扫一扫