组织图结构图连线

用css结合伪类伪元素实现画线

思路：使用伪元素加横向和竖向的border；为点击选中的项加selectl的类名；中间那列加横线；js获取选中的项与子类列表最后一个的高度差，用来设置border的高度

css

.tab2ul li.selectl::before {
        position:absolute;
        content:'';
      border-top: 1px solid #999;
      right: -20px;
      top: 11px;
      width: 21px;
    }
    .tab2ul li.selectl i {
      position: absolute;
      content: '';
      border-left: 1px solid #999;
      right: -20px;
      bottom:39px;
      width: 1px;
    }
    .tab2ul li.selectl:nth-child(1)::after {
      position:absolute;
      content:'';
      border-left:1px solid #999;
      height:30px;
      right: -20px;
      top:12px;
      width:1px
    }
    .tab3ul li.selectc i {
      position: absolute;
      content: '';
      border-left: 1px solid #999;
      right: -20px;
      bottom:39px;
      width: 1px;
    }
    .tab3ul li::before ,.tab4ul li::before{
      position: absolute;
      content: '';
      border-top: 1px solid #999;
      left: -26px;
      top: 11px;
      width: 26px;
    }
    .tab3ul li.selectc i{
      position: absolute;
      content: '';
      border-top: 1px solid #999;
      left: 230px;
      top: 11px;
      width: 20px;
    }

    .tab3ul li.selectc b {
      position:absolute;
      content:'';
      border-left:1px solid #999;
      /*height:30px;*/
      right: -20px;
      bottom: 28px;
      width:1px
    }
    .tab3ul li.selectc:nth-child(1) b {
      position:absolute;
      content:'';
      border-left:1px solid #999;
      height:20px;
      right: -20px;
      top:12px;
      width:1px
    }
    .tab3ul li:nth-child(1)::after ,.tab4ul li:nth-child(1)::after{
      position: absolute;
      content: '';
      border-left: 1px solid #999;
      height: 0px;
      left: 0px;
      top: -26px;
      width: 1px;
    }
    .tab3ul li::after ,.tab4ul li::after{
      position: absolute;
      content: '';
      border-left: 1px solid #999;
      height: 40px;
      left: -26px;
      top: -28px;
      width: 1px;
    }

html

<div class="topicclassify contractpic">
            <div class="mintab2 contractorleft clearfix">
              <ul class="tab2ul linelist">
                  <li class="m" pid="1" id="101" οnclick="getTab3(101,this)"><span class="btn btn-default" >潜艇</span><i></i></li>
                  <li class="m" pid="1" id="102" οnclick="getTab3(102,this)"><span class="btn btn-default" >航空母舰</span><i></i></li>
                  <li class="m" pid="1" id="103" οnclick="getTab3(103,this)"><span class="btn btn-default" >巡洋舰</span><i></i></li>
                  <li class="m" pid="1" id="104" οnclick="getTab3(104,this)"><span class="btn btn-default" >快艇</span><i></i></li>
                  <li class="m" pid="1" id="105" οnclick="getTab3(105,this)"><span class="btn btn-default" >反潜舰艇</span><i></i></li>
                  <li class="m" pid="1" id="106" οnclick="getTab3(106,this)"><span class="btn btn-default" >战列舰</span><i></i></li>
                  <li class="m" pid="1" id="107" οnclick="getTab3(107,this)"><span class="btn btn-default" >驱逐舰</span><i></i></li>
                  <li class="m" pid="1" id="108" οnclick="getTab3(108,this)"><span class="btn btn-default" >护卫舰</span><i></i></li>
            </div>
             <div class="contractorcenter clearfix">
                  <ul class="tab3ul none linelist relationc">

                  </ul>
            </div>

            <div class="mintab4 none contractorright clearfix">
                <ul class="tab4ul linelist relationr">

                </ul>
            </div>
            </div>
        </div>

js

//获取三级菜单
          function getTab3(parentId,obj) {

          $(obj).addClass("selectl").siblings().removeClass("selectl");
                  $(".mintab4").removeClass("block").addClass("none");
              var tab3ul = $('.tab3ul')[0],
                  str = '',
                  itemsArr = getItems(parentId);
                  if(itemsArr.length == 0){
                    str = '';
                    $('.tab3ul').removeClass("block").addClass("none");
                  }else{
                    $('.tab2ul li.selectl i').height($('.tab2ul li.selectl').position().top-20);
                    // console.log($('.tab2ul li.selectl').position());

                      for(var i = 0; i < itemsArr.length; i++){
                        str += '<li class="c" pId="'+ itemsArr[i].pId +'" id="'+ itemsArr[i].id +'" οnclick="getTab4('+itemsArr[i].id+',this)"><span class="btn btn-now">'+ itemsArr[i].name +'</span><i></i><b></b></li>';
                      }
                  }
                  // 儿子数量
                  var childthree =  itemsArr.length;
                  // alert(childthree)

                 $(tab3ul).html(str);
                $('.tab3ul').show();
              // 最后一个儿子距离父亲你的高度
                // alert($(".tab3ul li:last-child").position().top);

          }

          //获取四级菜单
          function getTab4(parentId,obj) {
              $(".mintab4").removeClass("none").addClass("block");
              $(obj).addClass("selectc").siblings().removeClass("selectc");
              //拼接所有的儿子html字符串
              var tab4ul = $('.tab4ul')[0],
                  str = '',
                  itemsArr = getItems(parentId);
                  if(itemsArr.length == 0){
                    str = '';
                  }else{
                    // console.log($('.tab3ul li:first-child').position());
                      $('.tab3ul li.selectc b').height($('.tab3ul li.selectc').position().top-40);
                    // console.log($('.tab4ul li:first-child').position());
                    for(var i = 0; i < itemsArr.length; i++){
                      str += '<li class="content" pId="'+ itemsArr[i].pId +'" id="'+ itemsArr[i].id +'"><span class="btn btn btn-grey">'+ itemsArr[i].name +'</span><i></i></li>';
                    }
                  }
              // 儿子数量
              var childtfour =  itemsArr.length;
              // alert(childtfour)
              $(tab4ul).html(str);

          }
          //公用方法：根据父元素的id，获取相对应的数据
          function getItems(id){
            var itemsArr = [];
            for(var i = 1; i < jsonArr.length; i++){
              if(id == jsonArr[i].pId){
                 itemsArr.push(jsonArr[i]);
              }
            }
            //console.log(itemsArr);
            return itemsArr;
          }

效果图