CSS3画箭头&calc动态调整高度
准备用bootstrap的treeview画一个权限管理的页面。右边用一个panel。中间加一个箭头。
两边都好弄，关键就是中间的这个箭头不好弄，听说css3可以画箭头，忍不住想试一下。
画箭头参考的这里： CSS3 4个带方向箭头的标注框
一开始代码是这样的：
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>老是对不齐title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="font-awesome.min.css" rel="stylesheet" type="text/css">
<style> .text--center { text-align: center; } .wrap { padding-left: 7%; } .title-style { font-weight: 100; font-size: 3em; color: #346BB3; } .box { width: 100%; float: left; margin-left: 0.46296%; margin-right: 0.46296%; position: relative; white-space: nowrap; border-radius: 5px; } .box:after { content: " "; position: absolute; /* position: relative; */ height: 0; width: 0; border: solid transparent; pointer-events: none; border-width: 20px; border-color: #fff; } .pointer--right { animation: animate-pointer--right 500ms ease-in-out; transform-origin: right center; } .pointer--right:after { border-left-color: #346BB3; top: 45%; /*每次展开或折叠时，div高度也会变化，因为li标签的border也有宽度，所以总是有几个像素对不齐*/ right: -42px; } @keyframes animate-pointer--right { 0% { transform: rotate(0deg) rotateX(30deg); opacity: 0; } 50% { transform: rotate(10deg); opacity: 1; } 70% { transform: rotate(-10deg) rotateX(-30deg); } 100% { transform: rotate(0deg); } } /* work in progress */ style>
head>
<body>
<div id="wrapper">
<div id="page-wrapper">
<div class="row">
<div class="col-lg-4">
<div id="tree" class="box pointer--right">div>
div>
<div class="col-lg-4">
<div class="panel-body">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×button>
<a href="#" class="alert-link">child2a>.
div>
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×button>
<a href="#" class="alert-link">child3a>.
div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×button>
<a href="#" class="alert-link">child4a>.
div>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×button>
<a href="#" class="alert-link">child5a>.
div>
div>
div>
div>
div>
div>
<script src="jquery.min.js">script>
<script src="bootstrap.min.js">script>
<script src="bootstrap-treeview.js">script>
<script type="text/javascript"> var data = [ { text: "Parent 1", nodes: [ { text: "Child 2", nodes: [ { text: "Grandchild 3" }, { text: "Grandchild 4" } ] }, { text: "Child 5" } ] }, { text: "Parent 6" }, { text: "Parent 7" }, { text: "Parent 8" }, { text: "Parent 9" }, { text: "Parent 10" }, { text: "Parent 11" }, { text: "Parent 12" }, { text: "Parent 13" }, { text: "Parent 14" }, { text: "Parent 15" } ]; function getTree() { // Some logic to retrieve, or generate tree structure return data; } $('#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. // backColor: 'green' }); $('#tree').on('nodeSelected', function(event, data) { console.log(data.parentId+","+data.nodeId+","+data.text); }); $('#tree').on('nodeCollapsed', function(event, data) { console.log($(".box.pointer--right").height()); console.log($(".box.pointer--right").outerHeight(true)); }); $('#tree').on('nodeExpanded', function(event, data) { console.log($("#tree").height()); }); $('#tree').on('nodeChecked', function(event, data) { console.log("checked.."+$("#tree").height()); }); script>
body>
html>
效果是这样的： 虽然没有完全对齐，起码还过得去。
但是菜单一折叠后，就明显对不齐了。
然后各种尝试。一开始以为top设置为50%就没问题的。后来调成了45%。然后越调越不对。
后来尝试使用js动态给after伪元素设置高度，没有成功。
接着单独写了一个div,然后给它加上box pointer–right class,top设置为50%。效果好的很。
<div style="height:440px; width:20px; border:1px solid lime" class="box pointer--right">div>
可以看到50%正好是正中间，是三角形的定点正好在正中间的位置。
直觉告诉我一定是高度出了问题。仔细排查后发现parent1~parent15在15个li标签里，被一个ul标签包围着。这个ul的高度才是真实的高度，#tree的高度比ul高了不少，所以一直对不齐。
然后修改代码如下：
①把样式加在ul上而不是外围的div上。
<div id="tree">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函数。
