JS树形菜单

PROMULGATOR

猫不二琪琪

广东省深圳市

← CSS实现蚂蚁边框线（IE10+）

→ js页面长时间无操作执行

相关代码

简单2级树实例

递归无限级目录树

简单的关系树

原生js实现可多选的树结构代码(原创)

jQuery判断节点状态

下拉多选回显

Html

Css

Js

.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;
}

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);
        }
    });
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

JS树形菜单



代码描述：JS无限级树形菜单

1

最新

发表评论全部评论

暂时没有评论！

WangXingWeb0

2017/8/22 10:14:12

不错，收藏了
回复

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS树形菜单-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号