treeview(树形导航)结构的写法

1.这样写的初衷参考easy-tree

这样写的是为了不重新引入一个css样式包看过treeview的包，而且还要去看文档，浪费了不少时间，于是就自己开始造轮子了

2.html 在敲得过程注意ul中li的嵌套关系，在li中使用伪类:before,:after线，要用相对定位。感觉表达不清，上图

未去掉背景色

去掉背景色

          <ul class="nav nav-sidebar">
            <li class="tree-parent">
               <span class="content-warp">
                   <span class="icon"><i class="fa fa-plus" aria-hidden="true"></i></span>
                   <span class="text">tianzehao</span>
               </span>
            </li>
            <li class="tree-parent">
               <span class="content-warp">
                   <span class="icon"><i class="fa fa-plus" aria-hidden="true"></i></span>
                   <span class="text">tianzehao</span>
               </span>
            </li>
            <li class="tree-parent">
                <span class="content-warp">
                    <span class="icon"><i class="fa fa-plus" aria-hidden="true"></i></span>
                    <span class="text">tianzehao</span>
                </span>
                <ul class="nav nav-sidebar">
                    <li>
                        <span class="content-warp">
                            <span class="icon"><i class="fa fa-plus" aria-hidden="true"></i></span>
                            <span class="text">tianzehao</span>
                        </span>
                    </li>
                    <li >
                        <span class="content-warp">
                            <span class="icon"><i class="fa fa-plus" aria-hidden="true"></i></span>
                            <span class="text">tianzehao</span>
                        </span>
                        <ul class="nav nav-sidebar">
                            <li>
                                <span class="content-warp">
                                    <span class="icon"><i class="fa fa-plus" aria-hidden="true"></i></span>
                                    <span class="text">tianzehao</span>
                                </span>
                            </li>
                            <li >
                                <span class="content-warp">
                                    <span class="icon"><i class="fa fa-plus" aria-hidden="true"></i></span>
                                    <span class="text">tianzehao</span>
                                </span>
                            </li>
                            <li>
                                <span class="content-warp">
                                    <span class="icon"><i class="fa fa-plus" aria-hidden="true"></i></span>
                                    <span class="text">tianzehao</span>
                                </span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span class="content-warp">
                            <span class="icon"><i class="fa fa-plus" aria-hidden="true"></i></span>
                            <span class="text">tianzehao</span>
                        </span>
                    </li>
                </ul>
            </li>
        </ul>

2、css样式控制使用的编辑器less

        .nav-sidebar{
          &:first-child{
            padding-left:20px;
          }
          margin: 0;
          padding-left:45px;
          li{
            box-sizing:border-box;
            cursor: pointer;
            padding:10px 0 0 0;
            //margin-left:15px;
            position:relative;
            width: 100%;
            min-height:50px;
            line-height: 40px;
            .content-warp{
              box-sizing:border-box;
              display: inline-block;
              border-radius:5px;
              height: 40px;
              background-color: #ff7709;
              padding:0 10px;
            }
            &:before{
              position: absolute;
              content: '';
              left: -30px;
              top: 0;
              width: 1px;
              height:100%;
              border-left: 1px solid #999;
            }
            &:after {
              position: absolute;
              content: '';
              width:30px;
              height: 1px;
              left:-29px;
              top: 30px;
              border-top: 1px solid #999;
            }
            &:last-child{
              &:before{
                height: 31px;
              }
            }
          }
          .tree-parent{
            padding-left: 0;
            &:before{
              border: 0;
            }
            &:after{
              border:0;
            }
          }
        
        }

3、js只需要一行简单的代码就够了

      $('.content-warp').click(function (){
          $(this).siblings('ul.nav-sidebar').slideToggle(300)
      })

小结

代码没有做兼容性，代码少，基于jq 代码复杂过去就可以用，这也是当初自己写的原因，不想引入别人的包，还要去看半天的源码，虽然时间成本上是一样的，但还是喜欢自己写，喜欢的朋友可以尝试自己写一下

4.需求改了，然后就这样

我们与产品狗的斗争就是这样的，需求又改了为了不然自己写的东西浪费掉，所以就照着继续写完。先上最总效果图

最终效果图

5. 还是基本的先上html

    <ul class="nav nav-sidebar">
            <li class="tree-parent ">
                <span class="content-warp">
                    <span class="icon"><i class="fa fa-plus" aria-hidden="true"></i></span>
                    <span class="text">天目湖</span>
                </span>
                <label class=""></label>
                <ul class="nav nav-sidebar " style="display:none;">
                    <li class="tree-child1">
                        <span class="content-warp">
                            <span class="icon"><i class="fa fa-plus" aria-hidden="true"></i></span>
                            <span class="text">天目湖南山竹海</span>
                        </span>
                        <label class=""></label>
                        <ul class="nav nav-sidebar" style="display:none;">
                            <li class="tree-child2"><span class="content-warp">
                                <span class="icon"><i class="fa fa-file" aria-hidden="true"></i></span>
                                <span class="text">携程门票</span></span>
                                <label></label>
                            </li>
                            <li  class="tree-child2">
                                <span class="content-warp">
                                    <span class="icon"><i class="fa fa-file" aria-hidden="true"></i></span>
                                    <span class="text">携程攻略-sight</span>
                                </span>
                                <label class=""></label>
                            </li>
                        </ul>
                    </li>
                    <li class="tree-child1"><span class="content-warp"><span class="icon"><i
                            class="fa fa-plus" aria-hidden="true"></i></span><span class="text">天目湖南山竹海客栈</span></span>
                        <label class=""></label>
                        <ul class="nav nav-sidebar" style="display:none;">
                            <li  class="tree-child2">
                                    <span class="content-warp">
                                             <span class="icon"><i class="fa fa-file" aria-hidden="true"></i></span>
                                             <span class="text">同程酒店</span>
                                    </span>
                                    <label class="" ></label>
                            </li>
                            <li  class="tree-child2">
                                    <span class="content-warp">
                                          <span class="icon"><i class="fa fa-file" aria-hidden="true"></i></span>
                                          <span class="text">途牛酒店</span>
                                    </span>
                                    <label class=""></label>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
    </ul>

5. 然后css 变化不多，但是有变化

ps：后面的勾选状态是用图片模拟的，根本就没有input，老大说带有input更符合规范，你可以自己选择喜欢的图片

        .sidebar{
          padding:20px 0!important;
        }
        .close{
          display: none;
        }
        .nav-sidebar{
          &:first-child{
            padding-left:20px;
          }
          trasnsition:all ease 0.5s;
          margin: 0;
          padding-left:45px;
          li{
            box-sizing:border-box;
            padding:10px 20px 0 0;
            //margin-left:15px;
            position:relative;
            width: 100%;
            min-height:50px;
            line-height: 40px;
            label{
              cursor: pointer;
              float: right;
              padding: 0;
              margin: 0;
              display: inline-block;
              width:25px;
              height: 40px;
              text-align: center;
              background:url("/crawler/bootstrap/img/input_bg.png") 80px 60px;
              &.checked{
                background:url("/crawler/bootstrap/img/input_bg.png") 50px 90px;
              }
            }
            .content-warp{
              box-sizing:border-box;
              display: inline-block;
              border-radius:3px;
              height: 40px;
              width:90%;
              background-color:#9ee3e6;
              padding:0 10px;
              color: #3882b0;
              .icon{
                cursor: pointer;
                margin-right: 5px;
                line-height:40px;
                float: left;
              }
              .text{
                cursor: pointer;
                width:250px;
                display: inline-block;
              }
        
            }
            &:before{
              position: absolute;
              content: '';
              left: -30px;
              top: 0;
              width: 1px;
              height:100%;
              border-left: 1px solid #999;
            }
            &:after {
              position: absolute;
              content: '';
              width:30px;
              height: 1px;
              left:-29px;
              top: 30px;
              border-top: 1px solid #999;
            }
            &:last-child{
              &:before{
                height: 31px;
              }
            }
          }
          .tree-child1{
            padding-right: 0;
            .content-warp{
              background: rgba(0,0,0,0);
              color:#666;
              .icon{
                color:#ebd264;
              }
              .text{
                width:200px;
              }
            }
          }
          .tree-child2{
            padding-right: 0;
            .content-warp{
              background: rgba(0,0,0,0);
              color:#999;
              .icon{
                color:#fc6472;
              }
            }
          }
          .tree-parent{
            padding-left: 0;
            &:before{
              border: 0;
            }
            &:after{
              border:0;
            }
          }
        
        }

5. 再然后js

ps一点：想在后面写函数调用的直接写在点击事件的最后，这样他才能找到点击后的效果

        $('#sideContent').on('click','.text',function (){
                $(this).parents('.content-warp').siblings('ul.nav-sidebar').stop().slideToggle(150);
                if($(this).parents('.content-warp').find('i').hasClass('fa-plus')){
                    $(this).parents('.content-warp').find('i').removeClass('fa-plus').addClass('fa-minus')
                }else{
                    $(this).parents('.content-warp').find('i').removeClass('fa-minus').addClass('fa-plus')
                }
            })
                .on('click','label',function (){
                if($(this).hasClass('checked')){
                    $(this).removeClass('checked');
                    $(this).siblings('ul.nav-sidebar').find('label').removeClass('checked');
                    $(this).parents('ul.nav-sidebar').siblings('label').removeClass('checked');
                }else{
                    $(this).addClass('checked');
                    $(this).siblings('ul.nav-sidebar').find('label').addClass('checked');
                    var tempNumber = $(this).parents('li.tree-child2').siblings('li').length;
                    var curNumber = $(this).parents('li.tree-child2').siblings('li').children('label.checked').length;
                    if(curNumber == tempNumber&&tempNumber!=1){
                       $(this).parents('li.tree-child2').parent('ul.nav-sidebar').siblings('label').addClass('checked');
                        var tempNumber_1 =  $(this).parents('li.tree-child1').siblings('li').length;
                        var curNumber_1 = $(this).parents('li.tree-child1').siblings('li').children('label.checked').length;
                        if(curNumber_1 == tempNumber_1){
                            $(this).parents('li.tree-child1').parents('ul.nav-sidebar').siblings('label').addClass('checked');
                        }
                    }
                    var tempNumber_1 =  $(this).parents('li.tree-child1').siblings('li').length;
                    var curNumber_1 = $(this).parents('li.tree-child1').siblings('li').children('label.checked').length;
                    if(curNumber_1 == tempNumber_1){
                        $(this).parent('li.tree-child1').parents('ul.nav-sidebar').siblings('label').addClass('checked');
                    }
                }
                
            });

6. 没有做成插件的形式，是因为不会，也不想那样弄得太复杂，这算是结束了 treeview的写法

最后编辑于：2017.12.06 02:31:49

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,132评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,802评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,566评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,858评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,867评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,695评论 1赞 282
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,064评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,705评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,915评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,677评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,796评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,432评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,041评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,992评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,223评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,185评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,535评论 2赞 343

treeview(树形导航)结构的写法

推荐阅读更多精彩内容