Cây dọc với CSS và HTML

Question

Tôi đang cố gắng vẽ một cây dọc giống như cấu trúc với HTML và CSS. Tôi đã làm điều đó ở một mức độ nào đó.

Fiddle

<!-- 
We will create a family tree using just CSS(3) 
The markup will be simple nested lists 
--> 
<div class="tree"> 
    <ul> 
     <li> 
      <a href="#">Parent</a> 
      <ul> 
       <li><a href="#">Child</a> 
        <ul> 
         <li><a href="#">Grand Child</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">Child</a> 
        <ul> 
         <li><a href="#">Grand Child</a></li> 
         <li><a href="#">Grand Child</a> 
          <ul> 
           <li><a href="#">Great Grand Child</a></li> 
           <li><a href="#">Great Grand Child</a></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Trong trường hợp của tôi, một nút có thể có tối đa 2 Childs, không nhiều hơn thế. Tôi đã có nó làm việc cho nút con đầu tiên. Trong trường hợp con thứ hai, không nhận được đường thẳng đứng đến 100% (cho đến khi nút cha của nó).

Tôi đã thử thực hiện một số chỉnh sửa nhưng không có công cụ nào trong số chúng hoạt động. Những gì tôi có thể thay đổi để CSS của tôi, do đó, nó sẽ nhận được tất cả các nút kết nối và trông giống như một cây?

Có thể thực hiện với chính CSS không? hoặc là có thể bằng cách thêm một số javascript?

Answer 1

Nếu bạn có một bộ hạn chế về khả năng và không tìm kiếm một cái gì đó rất năng động, có một điều bạn có thể làm là thêm các lớp học với nhau top và height cho :after pseudo element bạn và áp dụng các lớp học trong html của bạn để bạn li yếu tố phụ thuộc vào từng nhu cầu. Một cái gì đó như thế ví dụ:

.tree li::after{ 
    content: ''; 
    position: absolute; top: 0; 

    width: 3%; height: 50px; 
    right: auto; left: -2.5%; 

    border-bottom: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
    border-radius: 0 0 0 5px; 
    -webkit-border-radius: 0 0 0 5px; 
    -moz-border-radius: 0 0 0 5px; 
} 
.tree li.two-step::after{ 
    top: -100px; 
    height: 150px; 
} 

.tree li.three-step::after{ 
    top: -180px; 
    height: 230px; 
} 

https://jsfiddle.net/g2ue3wL5/1/

EDIT:

Xử lý :after pseudo-elements động không phải là dễ dàng như vậy (ít nhất là không cho tôi ...). Không thực sự là một cách để xử lý chúng trực tiếp, bạn phải đi qua yếu tố thực tế của họ, và thậm chí sau đó bạn cần phải làm việc với CSS. Vì vậy, một giải pháp năng động với :after sẽ không phải là cách tiếp cận tốt nhất mà tôi nghĩ.

Nhưng bạn có thể thay thế chúng bằng span và làm việc với jQuery. Điều này mang lại cho bạn một giải pháp tương đối nhỏ và dễ dàng. Đầu tiên, thêm một khoảng cho mỗi một phần tử:

<li><a href="#">Child</a> <span></span>  
<li><a href="#">Grand Child</a><span></span> 

Sau đó, trong CSS của bạn thay thế: sau với> gian tồn tại:

.tree li > span { 
    content:''; 
    position: absolute; 
    top: 0; 
    width: 3%; 
    height: 50px; 
    right: auto; 
    left: -2.5%; 
    border-bottom: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
    border-radius: 0 0 0 5px; 
    -webkit-border-radius: 0 0 0 5px; 
    -moz-border-radius: 0 0 0 5px; 
} 

Và bạn đi qua mỗi một trong các span và thực hiện một số tính toán để thiết lập height và top tùy thuộc vào parent:

$('.tree li > span').each(function() { 
    var thisNewTop = $(this).closest('ul').offset().top - $(this).offset().top; 
    var thisNewHeight = $(this).offset().top - $(this).closest('ul').offset().top + 50; 

    $(this).css({ 
     top: thisNewTop, 
     height: thisNewHeight 
    }); 
}); 

https://jsfiddle.net/g2ue3wL5/3/

Giải pháp tương đương trong đồng bằng javascript sẽ lâu hơn nhiều, tôi nghĩ rằng đó là loại tình huống mà jQuery có thể tiết kiệm rất nhiều thời gian.