<!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{ background-color:#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="全部展開" />&nbsp;&nbsp;
<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"}
 ]
/*遞歸實現(xiàn)獲取無級樹數(shù)據(jù)并生成DOM結(jié)構(gòu)*/
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>

希望本文所述對大家的jquery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery iScroll.js 移動端滾動條美化插件
這篇文章主要介紹了jQuery iScroll.js 移動端滾動條美化插件的相關(guān)資料,需要的朋友可以參考下
2016-02-02
jquery無縫向上滾動實現(xiàn)代碼
向上滾動的效果想必大家都見過吧!無縫間歇向上滾動應(yīng)該也不會陌生吧，接下來為大家介紹下jquery實現(xiàn)無縫間歇滾動，感興趣的朋友可以參考下哈，希望可以幫助到你們
2013-03-03
jQueryUI Sortable 應(yīng)用Demo(分享)
下面小編就為大家?guī)硪黄猨QueryUI Sortable 應(yīng)用Demo(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
jQuery+CSS3實現(xiàn)3D立方體旋轉(zhuǎn)效果
這篇文章主要介紹了jQuery結(jié)合CSS3來制作3D立方體旋轉(zhuǎn)效果，切換圖片時呈現(xiàn)3D立體圖片畫廊特效，需要的朋友可以參考下
2015-11-11
ajax與json 獲取數(shù)據(jù)并在前臺使用簡單實例
這篇文章主要介紹了ajax與json 獲取數(shù)據(jù)并在前臺使用簡單實例的相關(guān)資料,需要的朋友可以參考下
2017-01-01
這篇文章主要介紹了jQuery實現(xiàn)表格行上移下移和置頂?shù)姆椒?涉及jQuery操作頁面元素的相關(guān)技巧,需要的朋友可以參考下
2015-05-05