当前位置:首页 > js实现一个级联菜单

js实现一个级联菜单

发布于 2018-07-16 阅读 131 次 Javascript

介绍:

js无限级,级联菜单

代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>
    <style> 
        ul li{list-style:none;line-height:30px;}
        ul{list-style:none;padding-left:30px;}
    </style>
</head>
<body>
    <script>
        var arr = [
            {name:'lalalal菜单',code:'1',parentcode:'12'},
            {name:'lalalal菜单',code:'2',parentcode:'14'},
            {name:'lalalal菜单',code:'3',parentcode:'14'},
            {name:'lalalal菜单',code:'4',parentcode:'13'},
            {name:'lalalal菜单',code:'5',parentcode:'14'},
            {name:'lalalal菜单',code:'6',parentcode:'14'},
            {name:'lalalal菜单',code:'7',parentcode:'13'},
            {name:'lalalal菜单',code:'8',parentcode:'14'},
            {name:'lalalal菜单',code:'9',parentcode:'13'},
            {name:'lalalal菜单',code:'10',parentcode:'14'},
            {name:'lalalal菜单',code:'11',parentcode:''},
            {name:'lalalal菜单',code:'12',parentcode:''},
            {name:'lalalal菜单',code:'13',parentcode:''},
            {name:'lalalal菜单',code:'14',parentcode:''},
            {name:'lalalal菜单',code:'15',parentcode:''},
            {name:'lalalal菜单',code:'16',parentcode:'11'},
            {name:'lalalal菜单',code:'17',parentcode:'11'},
            {name:'lalalal菜单',code:'18',parentcode:'11'},
            {name:'lalalal菜单',code:'19',parentcode:'11'},
            {name:'lalalal菜单',code:'20',parentcode:'12'},
            {name:'lalalal菜单',code:'21',parentcode:'19'},
            {name:'lalalal菜单',code:'22',parentcode:'19'},
            {name:'lalalal菜单',code:'23',parentcode:'19'},
            {name:'lalalal菜单',code:'24',parentcode:'21'},
            {name:'lalalal菜单',code:'25',parentcode:'21'},
            {name:'lalalal菜单',code:'26',parentcode:'21'},
        ];
        var firstMenu = '<ul>',
            len = arr.length;
        function tree(arr){
            for(var i=0;i<len;i++){
                if(arr[i].parentcode == ''){
                    firstMenu += '<li>'+"<b>"+arr[i].code+"</b>"+arr[i].name;
                    second(arr, arr[i]);
                }
            }
            firstMenu += '</li></ul>';
            // console.log($(".tree").html());
            $(".tree").append($(firstMenu));
        }
        function second(arr, father){
            var isFirst = true,
                sec = '';
            for(var i=0;i<len;i++){
                if(arr[i].parentcode == father.code){
                    if(sec == ''){
                        sec = "<ul>"
                        firstMenu += sec;
                    };
                    sec = "<li>"+"<b>"+arr[i].code+"</b>"+arr[i].name+arr[i].parentcode;
                    firstMenu += sec;
                    second(arr, arr[i]);
                }
            }
            if(sec != '') firstMenu+="</ul></li>";
        }
        $(function(){
            tree(arr);
        })
    </script>

<div>-- 输出 --</div>
    <ul>
        <li><b>11</b>lalalal1212菜单
            <ul>
                <li><b>16</b>lalalal菜单11</li>
                <li><b>17</b>lalalal菜单11</li>
                <li><b>18</b>lalalal菜单11</li>
                <li><b>19</b>lalalal菜单11
                    <ul>
                        <li><b>21</b>lalalal菜单19
                            <ul>
                                <li><b>24</b>lalalal菜单21</li>
                                <li><b>25</b>lalalal菜单21</li>
                                <li><b>26</b>lalalal菜单21</li>
                            </ul>
                        </li>
                        <li><b>22</b>lalalal菜单19</li>
                        <li><b>23</b>lalalal菜单19</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><b>12</b>lalalal菜单
            <ul>
                <li><b>1</b>lalalal菜单12</li>
                <li><b>20</b>lalalal菜单12</li>
            </ul>
        </li>
        <li><b>13</b>lalalal菜单
            <ul>
            <li><b>4</b>lalalal菜单13</li>
            <li><b>7</b>lalalal菜单13</li>
            <li><b>9</b>lalalal菜单13</li>
            </ul>
        </li>
        <li><b>14</b>lalalal菜单
            <ul>
                <li><b>2</b>lalalal菜单14</li>
                <li><b>3</b>lalalal菜单14</li>
                <li><b>5</b>lalalal菜单14</li>
                <li><b>6</b>lalalal菜单14</li>
                <li><b>8</b>lalalal菜单14</li>
                <li><b>10</b>lalalal菜单14</li>
            </ul>
        </li>
        <li><b>15</b>lalalal菜单</li>
    </ul>
    <div>-- 添加 --</div>
    <div class="tree">1111</div>
</body>
</html>