css+jq横向树的实现

最近工作中有个UE设计是横向树的展示，查找了网上的一些资料并没有发现横向树的代码，于是自己根据实际需求利用::before和::after伪元素加上jq去简单实现，以后有机会争取再进行优化。

代码：

---

    
    
    


    

        

            

                报表名称
                

                    

                        功能名称1
                        

                            

                                磁贴名称1
                            
                            

                                磁贴名称2
                            
                            

                                磁贴名称3
                            
                        
                    
                
            
        
    

实现效果：

ps：需要特别说明的是，我目前的代码暂时只支持这两种样式，即：

1父节点-1子节点-1/多孙节点，或是1父节点-多子节点-1孙节点，样式是通过jq去判断修改的，以后有时间的话再去研究优化争取可复用性强一些。希望对大家能有所帮助。

欢迎交流讨论。