准备用bootstrap的treeview画一个权限管理的页面。右边用一个panel。中间加一个箭头。

两边都好弄，关键就是中间的这个箭头不好弄，听说css3可以画箭头，忍不住想试一下。

画箭头参考的这里：

一开始代码是这样的：

    
         
         
         
         
             
         
         
         
             
     
        
      
            
       
                
        
                    
         
                
        
                
        
                    
         
                        
          
 
           × 
           child2. 
          
                        
          
 
           × 
           child3. 
          
                        
          
 
           × 
           child4. 
          
                        
          
 
           × 
           child5. 
          
                    
         
                
        
                
                    
       
        
      
    
     
    
             
                 

效果是这样的： 虽然没有完全对齐，起码还过得去。

但是菜单一折叠后，就明显对不齐了。

然后各种尝试。一开始以为top设置为50%就没问题的。后来调成了45%。然后越调越不对。

后来尝试使用js动态给after伪元素设置高度，没有成功。

接着单独写了一个div,然后给它加上box pointer–right class,top设置为50%。效果好的很。

可以看到50%正好是正中间，是三角形的定点正好在正中间的位置。

直觉告诉我一定是高度出了问题。仔细排查后发现parent1~parent15在15个li标签里，被一个ul标签包围着。这个ul的高度才是真实的高度，#tree的高度比ul高了不少，所以一直对不齐。 然后修改代码如下：

①把样式加在ul上而不是外围的div上。

可是ul是动态生成的，所以只能用js加了，在treeview初始化完之后，给ul加样式：

$('#tree').treeview({            data: data,         // data is not optional            levels: 5         //Sets the number of hierarchical levels deep the tree will be expanded to by default.        });$("ul.list-group").addClass("box").addClass("pointer--right");

②top改为50%。

.pointer--right:after {    top: 50%;}

这回终于到正中间了，可惜是三角形的定点在正中间。

li标签的高度是40。三角形的高度也是40，应该让top减去20，这样就能跟Parent 8对齐了。

搜了一些css3有calc函数，可以动态调整高度。

top设置为:

-moz-calc(expression);-webkit-calc(expression);top: calc(50% - 20px); /*注意减号两边必须有空格!!!*/

终于好了。中间出了小插曲就是，calc函数里减号必须有空格，否则不起作用。

折叠之后也能对齐，多亏了css3炸天的calc函数。