jQuery实现树形结构菜单

一、效果图

二、核心代码

• 树形结构菜单.html

<script src="js/treemenu.js"></script> 
<script>
    //插件中的方法使用和配置
    //使用Ajax后端返回菜单的数据
    //下面用户可能设置相关配置
    $("#menu").Init({
        backGround: "#4667d8",
        color: '#fff',
        data: menu
    })

</script> 

• treemenu.js

function (window){
    //设置相关基础变量
    var instance;
    $.fn.extend({
        Init:function(settings){
            if(!instance){
                instance=new Tree();
            }
            //关联父容器
            setting.parentEle=$(this);
            //对象合并
            instance.options= $.extend({},setting,settings);
            //调用初始化
            instance._init();
        }
    });
    //默认配置
    var setting={
        backGround:'#fff',
        color:'#000',
        parentEle:null,
        data:null,
    }
    //代码的相关主函数类
    function Tree(){

    }
    //相关配置
    Tree.prototype.options={};
    //初始化方法
    Tree.prototype._init=function(){
        var that=this,opt=this.options,menudata=opt.data;
        if(menudata){
            //创建dom
            that.renderHtml();
            //添加事件
            that.addHandle();
        }
        else{
            throw new Error("需要获取菜单数据！");
        }
    }
    //dom渲染
    Tree.prototype.renderHtml= function () {
        var that=this,opt=this.options,menudata=opt.data;
        //创建外层的ul
        opt.menuItem=$("<ul class='menuItem'></ul>");
        opt.menuItem.css({
            backgroundColor: opt.backGround,
            color: opt.color
        });
        //数据遍历产生一级
        opt.firstLi='';
        menudata.map(function(item,index){
            var li=$("<li class='fli'></li>");
            var cdiv=$("<div class='fli_div'></div>");
            var icon=$("<i class='iconfont'>"+item.icon+"</i>");
            var sname=$("<span>"+item.name+"</span>");
            cdiv.append(icon);
            cdiv.append(sname);
            li.append(cdiv);
            opt.menuItem.append(li);
            //是否存在子集
            if(item.child){
                var tou=$("<span class='iconfont btn'>∧</span>");
                cdiv.append(tou);
                var childmenu=$("<ul class='cmenuItem'></ul>");
                item.child.map(function(citem){
                    var cli=$("<li></li>");
                    var ca=$("<a href=''>"+citem.name+"</a>");
                    ca.css({color:opt.color});
                    cli.append(ca);
                    childmenu.append(cli);
                });
                li.append(childmenu);
            }
        });
        opt.parentEle.append(opt.menuItem);

    };
    //渲染事件
    Tree.prototype.addHandle=function(){
        var that=this,opt=this.options;
        //给一级li添加事件
        $(".fli").each(function(index){
            $(this).on("mouseover",function(){
                $(this).children(".fli_div").addClass('fli_hover');
            }).on("mouseleave",function(){
                $(this).children(".fli_div").removeClass('fli_hover');
            });
        });
        $(".cmenuItem>li").each(function(index){
            $(this).on("mouseover",function(){
                $(this).addClass('hover_child');
            }).on("mouseleave",function(){
                $(this).removeClass('hover_child');
            });
        });
        var change=false;
        $(".fli_div").each(function(index){
            $(this).click(function(){
                change=!change;
                $(this).siblings('.cmenuItem').slideToggle();
                $(this).children(".btn").html(change?'∨' : '∧');
            })
        });
    } })(window);