PHP写json文件的树形菜单,解析json数据生成树形导航菜单

[HTML] 纯文本查看 复制代码运行代码

蚂蚁部落

.menuTree {

margin-left: 5px;

border-left: 1px dotted deepskyblue;

}

.menuTree div {

padding-left: 15px;

margin-bottom: 2px;

}

.menuTree strong {

border: 1px solid #aad3f2;

background: deepskyblue;

color: ghostwhite;

border-radius: 6px;

color: 16px));

}

.menuTree div ul {

overflow: hidden;

display: none;

height: auto;

border-left: 1px dotted deepskyblue;

padding-left: 0;

margin: 6px 0 6px 8px;

}

.menuTree span {

display: block;

height: 25px;

line-height: 25px;

padding-left: 5px;

margin: 1px 0;

cursor: pointer; /*border-bottom:1px solid #CCC;*/

position: relative;

}

.menuTree span:hover {

background-color: #e6e6e6;

color: deepskyblue;

}

.menuTree a {

color: #666;

text-decoration: none !important;

}

.menuTree a:hover {

color: #06F;

}

.menuTree span:before {

content: " ";

display: block;

width: 20px;

height: 0px;

position: absolute;

top: 50%;

left: -15px;

border-bottom: 1px dotted deepskyblue;

}

.menuTree ul span:before {

content: " ";

display: block;

width: 70px;

height: 0px;

position: absolute;

top: 50%;

left: -70px;

border-bottom: 1px dotted deepskyblue;

}

var json = [{

"name": "菜单栏效果",

"list": [{

"name": "-菜单栏效果",

"url": "#a1"

}, {

"name": "-菜单栏效果a",

"list": [{

"name": "--菜单栏效果",

"url": "#a11"

}, {

"name": "--菜单栏效果a",

"list": [{

"name": "---菜单栏效果",

"url": "#a111"

}, {

"name": "---菜单栏效果a",

"list": [{

"name": "----菜单栏效果",

"url": "#a1111"

}, {

"name": "----菜单栏效果a",

"url": "#a1112"

}]

}]

}, {

"name": "--菜单栏效果aa",

"url": "#a13"

}, {

"name": "--菜单栏效果aaa",

"url": "#a14"

}]

}, {

"name": "-菜单栏效果",

"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 = "

" + o[i]["name"] + "

• ";

} else {

urlstr = "

" + o[i]["name"] + "

• ";

}

str += urlstr;

if (o[i]["list"] != null) {

forTree(o[i]["list"]);

}

str += "

";

} 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(20, 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);

}

}

})

}()