无限层级菜单

157 阅读 0 评论 104 点赞

我是靠谱客的博主斯文蜡烛，这篇文章主要介绍无限层级菜单，现在分享给大家，希望可以做个参考。

无限层级菜单

先展示html:

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<nav class="navbar navbar-default navbar-static-top">
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="sidebar-search">
                        <div class="input-group custom-search-form" style="display: flex">
                            <input type="text" class="form-control" placeholder="Search...">
                            <span class="input-group-btn" style="align-self: flex-start;">
                                <button class="btn btn-default" type="button" style="margin: 0 0 0 10px">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

进入页面，初始化请求后台数据，加载最外层菜单：

复制代码

packageAjax({url:'operations/getOrgData?parentId=0',type:"GET",data:'',dataType:'json'},function(data){//初始化
        if (data && data.code === 0 ) {
            var seldvel = '';
            for (let index = 0; index < data.item.length; index++) {
                seldvel+='<li class="action" data-uuid = '+data.item[index].orgUuid+'><input type = "checkbox" name = "groupUuids" class = "chbox" style = "z-index:999"/><a href="javascript:void(0)"><i class="fa arrow fa-fw"></i>'+data.item[index].name+'</a></li>'
                
            }
            $('#side-menu').append(seldvel);
            $('#side-menu').metisMenu();
        }else{
            var seldvel = '<div style="text-align:center;color:red">'+data.message+'</div>'
            $('#side-menu').append(seldvel);
        }
        $('.chbox').click(function(evt){
            // 阻止冒泡
            evt.stopPropagation();
            if($(this).prop("checked")){
                $(this).prop("checked",true);
                $(this).siblings().find('.chbox').prop("checked",true);
            }else{
                $(this).prop("checked",false);
                $(this).siblings().find('.chbox').prop("checked",false);
            }
        });
    })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
packageAjax({url:'operations/getOrgData?parentId=0',type:"GET",data:'',dataType:'json'},function(data){//初始化
        if (data && data.code === 0 ) {
            var seldvel = '';
            for (let index = 0; index < data.item.length; index++) {
                seldvel+='<li class="action" data-uuid = '+data.item[index].orgUuid+'><input type = "checkbox" name = "groupUuids" class = "chbox" style = "z-index:999"/><a href="javascript:void(0)"><i class="fa arrow fa-fw"></i>'+data.item[index].name+'</a></li>'
                
            }
            $('#side-menu').append(seldvel);
            $('#side-menu').metisMenu();
        }else{
            var seldvel = '<div style="text-align:center;color:red">'+data.message+'</div>'
            $('#side-menu').append(seldvel);
        }
        $('.chbox').click(function(evt){
            // 阻止冒泡
            evt.stopPropagation();
            if($(this).prop("checked")){
                $(this).prop("checked",true);
                $(this).siblings().find('.chbox').prop("checked",true);
            }else{
                $(this).prop("checked",false);
                $(this).siblings().find('.chbox').prop("checked",false);
            }
        });
    })

当然packageAjax函数是自己封装的：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 $(function() {
            var packageAjax = function(params,callback){ //ajax请求数据
                var _url = params.url,
                    _type = params.type,
                    _data = params.data,
                    _dataType = params.dataType,
                    _timeOut = 10000;

                $.ajax({
                    url: _url,
                    type: _type,
                    data: _data,
                    dataType: _dataType,
                    // timeout: _timeOut,
                    success:function(data){
                        callback(data);
                    },
                    error:function(data){
                        alert(data.message)
                    },
                    complete:function(xhr,status){
                        xhr=null;
                    }
                })
            }

然后给初始化加载出来的菜单添加点击事件，每点击一次从后台获取当前菜单下的子菜单，其中包括菜单的checkbox选中状态都会根据父级菜单的选中与否，子集菜单自动生成。也对选中父级子集全选，子集有未选中父级disabled等菜单选择的几种状态：

复制代码

$('#side-menu').on('click','a',function(e){
        var orgUuid = $(this).parent().attr('data-uuid');
        var that = this;
        if (!$(that).data('clicked')) { 
            $('#side-menu').metisMenu('dispose');
            packageAjax({url:'operations/getOrgData?parentId='+orgUuid,type:"GET",data:'',dataType:'json'},function(data){//拉子数据
            // packageAjax({url:'./li.json',type:"GET",data:'',dataType:'json'},function(data){
                var seldvel = '';
                for (let index = 0; index < data.item.length; index++) {
                    seldvel+='<li class="action" data-uuid = '+data.item[index].orgUuid+'><input type = "checkbox" name = "groupUuids" class = "chbox" style = "z-index:999"/><a href="javascript:void(0)"><i class="fa arrow fa-fw"></i>'+data.item[index].name+'</a></li>'
                    
                }
                var uldvel = '<ul class="nav nav-second-level" style="display:none;">'+seldvel+'</ul>'
                $(that).parent().append(uldvel);
                if ($(that).siblings('.chbox').prop("checked")) { //根据父级是否选中子集展示不同状态
                    $(that).next().find('.chbox').prop("checked",true)
                } else {
                    $(that).next().find('.chbox').prop("checked",false)
                }
                $(that).parent().children('ul').show(500)
                $(that).parent().addClass('mm-active');
                $(that).attr('aria-expanded','true');
                $(that).parent().children('ul').addClass('mm-collapse').addClass('mm-show');
                // $('#side-menu').metisMenu();
                $('.chbox').click(function(evt){ //点击选择和取消
                    // 阻止冒泡
                    evt.stopPropagation();
                    if($(this).prop("checked")){
                        $(this).prop("checked",true);
                        $(this).siblings().find('.chbox').prop("checked",true);
                    }else{
                        $(this).prop("checked",false);
                        $(this).siblings().find('.chbox').prop("checked",false);
                    }
                    var _siblings = $(this).parent().siblings().children('.chbox')
                    var result1 = true;
                    var result2 = true;
                    var result3 = true;

for (let index = 0; index < _siblings.length; index++) {
                        result1 = result1 &&  $(_siblings[index]).prop("checked"); //其他的都选中
                        result2 = result2 && !$(_siblings[index]).prop("checked"); //其他的都不选中
                        result3 = result3 && $(_siblings[index]).prop("checked"); //父级选中，子集有未选中的
                    }
                    if (!$(this).prop("checked")) { //有一个未选中，父级disabled
                        $(this).parent().parent().prevAll('.chbox').attr('disabled','disabled');
                        
                        if (result2) { //所有的都未选中
                            $(this).parent().parent().prevAll('.chbox').removeAttr('disabled'); 
                            $(this).parent().parent().prevAll('.chbox').prop("checked",false);
                        }
                    } else{
                        if (result1) { //所有的都选中
                            $(this).parent().parent().prevAll('.chbox').removeAttr('disabled'); 
                            $(this).parent().parent().prevAll('.chbox').prop("checked",true);
                        }
                        if (!result3) {//父级选中，子集有未选中的
                            $(this).parent().parent().prevAll('.chbox').attr('disabled','disabled');
                        }
                    }
                });
                $('#side-menu').metisMenu();
                // $(that).find('a').css({'color':'red'})
            })
            $(that).data('clicked', true); 
    
        } else{
            $('#side-menu').metisMenu();
            // $(that).find('a').removeAttr('color')
        }
        return false;
    });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
$('#side-menu').on('click','a',function(e){
        var orgUuid = $(this).parent().attr('data-uuid');
        var that = this;
        if (!$(that).data('clicked')) { 
            $('#side-menu').metisMenu('dispose');
            packageAjax({url:'operations/getOrgData?parentId='+orgUuid,type:"GET",data:'',dataType:'json'},function(data){//拉子数据
            // packageAjax({url:'./li.json',type:"GET",data:'',dataType:'json'},function(data){
                var seldvel = '';
                for (let index = 0; index < data.item.length; index++) {
                    seldvel+='<li class="action" data-uuid = '+data.item[index].orgUuid+'><input type = "checkbox" name = "groupUuids" class = "chbox" style = "z-index:999"/><a href="javascript:void(0)"><i class="fa arrow fa-fw"></i>'+data.item[index].name+'</a></li>'
                    
                }
                var uldvel = '<ul class="nav nav-second-level" style="display:none;">'+seldvel+'</ul>'
                $(that).parent().append(uldvel);
                if ($(that).siblings('.chbox').prop("checked")) { //根据父级是否选中子集展示不同状态
                    $(that).next().find('.chbox').prop("checked",true)
                } else {
                    $(that).next().find('.chbox').prop("checked",false)
                }
                $(that).parent().children('ul').show(500)
                $(that).parent().addClass('mm-active');
                $(that).attr('aria-expanded','true');
                $(that).parent().children('ul').addClass('mm-collapse').addClass('mm-show');
                // $('#side-menu').metisMenu();
                $('.chbox').click(function(evt){ //点击选择和取消
                    // 阻止冒泡
                    evt.stopPropagation();
                    if($(this).prop("checked")){
                        $(this).prop("checked",true);
                        $(this).siblings().find('.chbox').prop("checked",true);
                    }else{
                        $(this).prop("checked",false);
                        $(this).siblings().find('.chbox').prop("checked",false);
                    }
                    var _siblings = $(this).parent().siblings().children('.chbox')
                    var result1 = true;
                    var result2 = true;
                    var result3 = true;

                    for (let index = 0; index < _siblings.length; index++) {
                        result1 = result1 &&  $(_siblings[index]).prop("checked"); //其他的都选中
                        result2 = result2 && !$(_siblings[index]).prop("checked"); //其他的都不选中
                        result3 = result3 && $(_siblings[index]).prop("checked"); //父级选中，子集有未选中的
                    }
                    if (!$(this).prop("checked")) { //有一个未选中，父级disabled
                        $(this).parent().parent().prevAll('.chbox').attr('disabled','disabled');
                        
                        if (result2) { //所有的都未选中
                            $(this).parent().parent().prevAll('.chbox').removeAttr('disabled'); 
                            $(this).parent().parent().prevAll('.chbox').prop("checked",false);
                        }
                    } else{
                        if (result1) { //所有的都选中
                            $(this).parent().parent().prevAll('.chbox').removeAttr('disabled'); 
                            $(this).parent().parent().prevAll('.chbox').prop("checked",true);
                        }
                        if (!result3) {//父级选中，子集有未选中的
                            $(this).parent().parent().prevAll('.chbox').attr('disabled','disabled');
                        }
                    }
                });
                $('#side-menu').metisMenu();
                // $(that).find('a').css({'color':'red'})
            })
            $(that).data('clicked', true); 
    
        } else{
            $('#side-menu').metisMenu();
            // $(that).find('a').removeAttr('color')
        }
        return false;
    });

引入的插件：

复制代码

1
2
3
4
5
6
7
8
<link rel="stylesheet" href="./bootstrap/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./metismenu/dist/metisMenu.min.css">
<link rel="stylesheet" href="./css.css">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="./bootstrap/bootstrap/js/bootstrap.min.js"></script>
<script src="./metismenu/dist/metisMenu.min.js"></script>

整个代码：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./bootstrap/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./metismenu/dist/metisMenu.min.css">
    <link rel="stylesheet" href="./css.css">
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="./bootstrap/bootstrap/js/bootstrap.min.js"></script>
    <script src="./metismenu/dist/metisMenu.min.js"></script>
    <title>Document</title>
</head>
<body>
    <nav class="navbar navbar-default navbar-static-top">
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="sidebar-search">
                        <div class="input-group custom-search-form" style="display: flex">
                            <input type="text" class="form-control" placeholder="Search...">
                            <span class="input-group-btn" style="align-self: flex-start;">
                                <button class="btn btn-default" type="button" style="margin: 0 0 0 10px">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <script type="text/javascript">
       
        $(function() {
            var packageAjax = function(params,callback){ //ajax请求数据
        var _url = params.url,
            _type = params.type,
            _data = params.data,
            _dataType = params.dataType,
            _timeOut = 10000;

$.ajax({
            url: _url,
            type: _type,
            data: _data,
            dataType: _dataType,
            // timeout: _timeOut,
            success:function(data){
                callback(data);
            },
            error:function(data){
                // alert(data.message)
            },
            complete:function(xhr,status){
                xhr=null;//导致原因是每次发送ajax会new一个新的xhr对象，ajax完成后销毁即可
            }
        })
    }
    packageAjax({url:'operations/getOrgData?parentId=0',type:"GET",data:'',dataType:'json'},function(data){//初始化
    // packageAjax({url:'./nav.json',type:"GET",data:'',dataType:'json'},function(data){
        if (data && data.code === 0 ) {
            var seldvel = '';
            for (let index = 0; index < data.item.length; index++) {
                seldvel+='<li class="action" data-uuid = '+data.item[index].orgUuid+'><input type = "checkbox" name = "groupUuids" class = "chbox" style = "z-index:999"/><a href="javascript:void(0)"><i class="fa arrow fa-fw"></i>'+data.item[index].name+'</a></li>'
                
            }
            $('#side-menu').append(seldvel);
            $('#side-menu').metisMenu();
        }else{
            var seldvel = '<div style="text-align:center;color:red">'+data.message+'</div>'
            $('#side-menu').append(seldvel);
        }
        $('.chbox').click(function(evt){
            // 阻止冒泡
            evt.stopPropagation();
            if($(this).prop("checked")){
                $(this).prop("checked",true);
                $(this).siblings().find('.chbox').prop("checked",true);
            }else{
                $(this).prop("checked",false);
                $(this).siblings().find('.chbox').prop("checked",false);
            }
        });
    }) 
    $('#side-menu').on('click','a',function(e){
        var orgUuid = $(this).parent().attr('data-uuid');
        var that = this;
        if (!$(that).data('clicked')) { 
            $('#side-menu').metisMenu('dispose');
            packageAjax({url:'operations/getOrgData?parentId='+orgUuid,type:"GET",data:'',dataType:'json'},function(data){//拉子数据
            // packageAjax({url:'./li.json',type:"GET",data:'',dataType:'json'},function(data){
                var seldvel = '';
                for (let index = 0; index < data.item.length; index++) {
                    seldvel+='<li class="action" data-uuid = '+data.item[index].orgUuid+'><input type = "checkbox" name = "groupUuids" class = "chbox" style = "z-index:999"/><a href="javascript:void(0)"><i class="fa arrow fa-fw"></i>'+data.item[index].name+'</a></li>'
                    
                }
                var uldvel = '<ul class="nav nav-second-level" style="display:none;">'+seldvel+'</ul>'
                $(that).parent().append(uldvel);
                if ($(that).siblings('.chbox').prop("checked")) { //根据父级是否选中子集展示不同状态
                    $(that).next().find('.chbox').prop("checked",true)
                } else {
                    $(that).next().find('.chbox').prop("checked",false)
                }
                $(that).parent().children('ul').show(500)
                $(that).parent().addClass('mm-active');
                $(that).attr('aria-expanded','true');
                $(that).parent().children('ul').addClass('mm-collapse').addClass('mm-show');
                // $('#side-menu').metisMenu();
                $('.chbox').click(function(evt){ //点击选择和取消
                    // 阻止冒泡
                    evt.stopPropagation();
                    if($(this).prop("checked")){
                        $(this).prop("checked",true);
                        $(this).siblings().find('.chbox').prop("checked",true);
                    }else{
                        $(this).prop("checked",false);
                        $(this).siblings().find('.chbox').prop("checked",false);
                    }
                    var _siblings = $(this).parent().siblings().children('.chbox')
                    var result1 = true;
                    var result2 = true;
                    var result3 = true;

})
       
        </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./bootstrap/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./metismenu/dist/metisMenu.min.css">
    <link rel="stylesheet" href="./css.css">
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="./bootstrap/bootstrap/js/bootstrap.min.js"></script>
    <script src="./metismenu/dist/metisMenu.min.js"></script>
    <title>Document</title>
</head>
<body>
    <nav class="navbar navbar-default navbar-static-top">
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="sidebar-search">
                        <div class="input-group custom-search-form" style="display: flex">
                            <input type="text" class="form-control" placeholder="Search...">
                            <span class="input-group-btn" style="align-self: flex-start;">
                                <button class="btn btn-default" type="button" style="margin: 0 0 0 10px">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <script type="text/javascript">
       
        $(function() {
            var packageAjax = function(params,callback){ //ajax请求数据
        var _url = params.url,
            _type = params.type,
            _data = params.data,
            _dataType = params.dataType,
            _timeOut = 10000;

        $.ajax({
            url: _url,
            type: _type,
            data: _data,
            dataType: _dataType,
            // timeout: _timeOut,
            success:function(data){
                callback(data);
            },
            error:function(data){
                // alert(data.message)
            },
            complete:function(xhr,status){
                xhr=null;//导致原因是每次发送ajax会new一个新的xhr对象，ajax完成后销毁即可
            }
        })
    }
    packageAjax({url:'operations/getOrgData?parentId=0',type:"GET",data:'',dataType:'json'},function(data){//初始化
    // packageAjax({url:'./nav.json',type:"GET",data:'',dataType:'json'},function(data){
        if (data && data.code === 0 ) {
            var seldvel = '';
            for (let index = 0; index < data.item.length; index++) {
                seldvel+='<li class="action" data-uuid = '+data.item[index].orgUuid+'><input type = "checkbox" name = "groupUuids" class = "chbox" style = "z-index:999"/><a href="javascript:void(0)"><i class="fa arrow fa-fw"></i>'+data.item[index].name+'</a></li>'
                
            }
            $('#side-menu').append(seldvel);
            $('#side-menu').metisMenu();
        }else{
            var seldvel = '<div style="text-align:center;color:red">'+data.message+'</div>'
            $('#side-menu').append(seldvel);
        }
        $('.chbox').click(function(evt){
            // 阻止冒泡
            evt.stopPropagation();
            if($(this).prop("checked")){
                $(this).prop("checked",true);
                $(this).siblings().find('.chbox').prop("checked",true);
            }else{
                $(this).prop("checked",false);
                $(this).siblings().find('.chbox').prop("checked",false);
            }
        });
    }) 
    $('#side-menu').on('click','a',function(e){
        var orgUuid = $(this).parent().attr('data-uuid');
        var that = this;
        if (!$(that).data('clicked')) { 
            $('#side-menu').metisMenu('dispose');
            packageAjax({url:'operations/getOrgData?parentId='+orgUuid,type:"GET",data:'',dataType:'json'},function(data){//拉子数据
            // packageAjax({url:'./li.json',type:"GET",data:'',dataType:'json'},function(data){
                var seldvel = '';
                for (let index = 0; index < data.item.length; index++) {
                    seldvel+='<li class="action" data-uuid = '+data.item[index].orgUuid+'><input type = "checkbox" name = "groupUuids" class = "chbox" style = "z-index:999"/><a href="javascript:void(0)"><i class="fa arrow fa-fw"></i>'+data.item[index].name+'</a></li>'
                    
                }
                var uldvel = '<ul class="nav nav-second-level" style="display:none;">'+seldvel+'</ul>'
                $(that).parent().append(uldvel);
                if ($(that).siblings('.chbox').prop("checked")) { //根据父级是否选中子集展示不同状态
                    $(that).next().find('.chbox').prop("checked",true)
                } else {
                    $(that).next().find('.chbox').prop("checked",false)
                }
                $(that).parent().children('ul').show(500)
                $(that).parent().addClass('mm-active');
                $(that).attr('aria-expanded','true');
                $(that).parent().children('ul').addClass('mm-collapse').addClass('mm-show');
                // $('#side-menu').metisMenu();
                $('.chbox').click(function(evt){ //点击选择和取消
                    // 阻止冒泡
                    evt.stopPropagation();
                    if($(this).prop("checked")){
                        $(this).prop("checked",true);
                        $(this).siblings().find('.chbox').prop("checked",true);
                    }else{
                        $(this).prop("checked",false);
                        $(this).siblings().find('.chbox').prop("checked",false);
                    }
                    var _siblings = $(this).parent().siblings().children('.chbox')
                    var result1 = true;
                    var result2 = true;
                    var result3 = true;

                    for (let index = 0; index < _siblings.length; index++) {
                        result1 = result1 &&  $(_siblings[index]).prop("checked"); //其他的都选中
                        result2 = result2 && !$(_siblings[index]).prop("checked"); //其他的都不选中
                        result3 = result3 && $(_siblings[index]).prop("checked"); //父级选中，子集有未选中的
                    }
                    if (!$(this).prop("checked")) { //有一个未选中，父级disabled
                        $(this).parent().parent().prevAll('.chbox').attr('disabled','disabled');
                        
                        if (result2) { //所有的都未选中
                            $(this).parent().parent().prevAll('.chbox').removeAttr('disabled'); 
                            $(this).parent().parent().prevAll('.chbox').prop("checked",false);
                        }
                    } else{
                        if (result1) { //所有的都选中
                            $(this).parent().parent().prevAll('.chbox').removeAttr('disabled'); 
                            $(this).parent().parent().prevAll('.chbox').prop("checked",true);
                        }
                        if (!result3) {//父级选中，子集有未选中的
                            $(this).parent().parent().prevAll('.chbox').attr('disabled','disabled');
                        }
                    }
                });
                $('#side-menu').metisMenu();
                // $(that).find('a').css({'color':'red'})
            })
            $(that).data('clicked', true); 
    
        } else{
            $('#side-menu').metisMenu();
            // $(that).find('a').removeAttr('color')
        }
        return false;
    });

        })
       
        </script>
</body>
</html>