标签：menuTree 菜单 name url js ul 树形 var
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生js动态生成树形菜单 </title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="menuTree" class="menuTree"></div>
</body>
<style>
.menuTree div {
padding-left: 20px;
}
.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>
<script type="text/javascript">
var json = [{
"name": "1级菜单",
"list": [{
"name": "2级菜单",
"url": "/url1"
},
{
"name": "2级菜单",
"list": [{
"name": "3级菜单",
"list": [{
"name": "4级菜单",
"url": "/url111"
}, {
"name": "4级菜单",
"list": [{
"name": "5级菜单",
"url": "/url1111"
}, {
"name": "5级菜单",
"url": "/url1112"
}]
}]
},
{
"name": "3级菜单",
"url": "/url13"
},
{
"name": "3级菜单",
"url": "/url14"
}
]
},
{
"name": "2级菜单",
"url": "/url3"
}
]
},
{
"name": "1级菜单",
"list": [{
"name": "2级菜单",
"url": "/url1"
},
{
"name": "2级菜单",
"list": [{
"name": "3级菜单",
"url": "/url111"
},
{
"name": "3级菜单",
"url": "/url112"
}
]
},
]
},
{
"name": "1级菜单",
"list": [{
"name": "2级菜单",
"url": "/url1"
},
{
"name": "2级菜单",
"url": "/url2"
}
]
},
{
"name": "1级菜单"
}
]
/*递归实现获取多级树数据并生成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>
</html>
效果图
标签：menuTree,菜单,name,url,js,ul,树形,var 来源： https://blog.csdn.net/weixin_49078296/article/details/121895123
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。