jquery+递归自动生成无限级菜单

78 阅读 0 评论 52 点赞

我是靠谱客的博主娇气超短裙，最近开发中收集的这篇文章主要介绍jquery+递归自动生成无限级菜单，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

 <!DOCTYPE html>
<html>
<head>
<meta charset="GB18030">
<title>Insert title here</title>
<style type="text/css">
    #menu {border: 1px solid black; }
    #menu li {list-style: none;}
    #menu li ul {display: none;}
</style>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //创建类，采用键值对的方式 
        var obj = {"menu1":"a", "menu2":{"item1":"bb","item2":"cc"}, "menu3":{"item1":"aa","item2":"bb","item3":{"button1":"b1","button2":"b2"}}};
        buildMenu(obj);
        $("#menu").html(buildMenu(obj));
        $("#menu ul li").click(function () {
            $(this).siblings().find("ul").css("display", "none"); //找到同一级的ul将其隐藏 
            if ( $(this).has("ul").length > 0 ) {
                $(this).children("ul").css("display", "block");   //如果是ul将其子项显示出来 
            }
        });
    });
    //创建按钮
    function buildMenu(obj) {
        var str = "<ul>";
        $.each(obj, function (index, item) {
            if (typeof(obj[index]) == "object") {
                str += "<li>" + index;
                str += buildMenu(obj[index]); //递归判断是不是object,直到不是li 
                str += "</li>";
            }
            else {
            //  alert(index + "--" + obj[index]);  //item == obj[index]
                str += "<li>" + index + "</li>" 
            }
        });
        str += "</ul>";
        return str;
    }
</script>
</head>
<body>
    <div id="menu"></div>
</body>
</html>