三级树形菜单demo

最新推荐文章于 2023-02-27 09:56:24 发布

置顶婼嘸娸倳

最新推荐文章于 2023-02-27 09:56:24 发布

阅读量2.1k

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_36358940/article/details/79870216

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

闲来无事写了个三级树形菜单demo，基于Jquery,还有很多优化空间

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>三级树形菜单demo</title>
    </head>
    <body>      
        <ul>
            <li>
                <ul class="container_ul">                   
                </ul>
            </li>
        </ul>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script>
            // data和dataChild分别作为模拟的ajax数据
            var data=[{          
                city:'北京0',
                cityChild:['朝阳0','海淀0','东城区0']
             },{             
                city:'北京1',
                cityChild:['朝阳1','海淀1','东城区1']
             },{             
                city:'北京2',
                cityChild:['朝阳2','海淀2','东城区2']
             },{             
                city:'北京3',
                cityChild:['朝阳3','海淀3','东城区3']
             },{             
                city:'北京4',
                cityChild:['朝阳4','海淀4','东城区4']
             }];
             var dataChild=[{            
                country:'朝阳0',
                countryChild:['朝阳子类0','朝阳子类1','朝阳子类2']
             },{             
                country:'海淀0',
                countryChild:['海淀子类0','海淀子类1','海淀子类2']
             },{             
                country:'东城区0',
                countryChild:['东城区子类0','东城区子类1','东城区子类2']
             },{             
                country:'朝阳1',
                countryChild:['朝阳子类1','朝阳子类2','朝阳子类3']
             },{             
                country:'海淀1',
                countryChild:['海淀子类1','海淀子类2','海淀子类3']
             },{             
                country:'东城区1',
                countryChild:['东城区子类1','东城区子类2','东城区子类3']
             }]
            var html='';
            data.forEach(function(item,index){
                console.log(index,'???');               
                html +='<li class="item'+index+'">'+item.city+'</li>';
            })
            $('.container_ul').append(html);           
            $('.container_ul').click(function(e){
                e.stopPropagation();                    
                console.log(e.target,'jjjjjj');                                         
                if(e.target.tagName.toUpperCase()=='LI'){               
                    let a =e.target.className;
                    console.log(a,'aaaaa');
                    if(a.indexOf('last')>-1){
                        // 点击最后一级
                        return;
                    }
                    else if(a.indexOf('item_sec')>-1){
                      console.log('这是点击二级类的逻辑');
                      console.log($(e.target).find("ul"),'我是etarget');
                      console.log($(e.target).html());
                      var html2;
                      console.log($(e.target).find("ul").length,'??????????')
                      if($(e.target).find("ul").length>0){
                         $(e.target).children("ul").remove();
                      }else{
                      html2='<ul>';
                      dataChild.forEach(function(element, index) {
                        if(element.country==$(e.target).html()){
                            console.log(element.countryChild,index,'jhhhh');
                            element.countryChild.forEach(function(item, index) {
                                html2+='<li class="last">'+item+'</li>'
                            });                             
                        }
                     }); 
                     html2+='</ul>';                    
                    $('.'+a).siblings('.last').children().empty();
                    $('.'+a+' '+"ul").remove();
                    $(e.target).append(html2);     
                    console.log(html2,'我是html22');                  
                       return;
                     }
                   }else{
                        let index=a.substr(a.length-1,1);
                        var html1="<ul>";
                        data[index].cityChild.forEach(function(item, index) {
                            html1 +='<li class="item item_sec">'+item+'</li>';// statements
                        });
                        html1+='</ul>';             
                        console.log(e.target,'我是target');
                        console.log($(e.target).find('ul'));
                        if($(e.target).find('ul').length){
                            html1=''
                        }
                        $(e.target).siblings('.item').children().empty();
                        $('.'+a+' '+"ul").remove();
                        $(e.target).append(html1); 
                    }                   
                }           
            })
        </script>
    </body>
</html>