ul,li { margin:0px; padding:0px; list-style:none; } a { text-decoration:none; color:#222; } .tree { width:300px; } .tree .option { width:100%; cursor:pointer; } .tree .option p span { font-weight:bold; } .tree .option.active p span { color:#09f; } .tree .option p { box-sizing:border-box; width:100%; font-size:16px; line-height:46px; color:#222222; display:flex; justify-content:space-between; padding-right:34px; } .tree .option p .iconfont { font-size:12px; } .tree .option .tree-two { width:100%; height:0px; overflow:hidden; } .tree .option .tree-two .item { width:100%; } .tree .option .tree-two .item a { box-sizing:border-box; padding-left:2em; display:inline-block; width:100%; height:36px; line-height:36px; font-size:16px; } .tree .option .tree-two .item.active a { background-color:#E6F7FF; border-right:4px solid #09f; color:#09f; }
更新时间:2020-08-20 00:34:19
树形组件
## 实现思路
- 1.以 **ul > li > ul > li** 的思路实现
- 2.第一个 li 指的是一级标题
- 3.第二个 ul 指的是二级标题的容器
- 4.第二个 ul 中的 li 指的是二级标题的内容
## 动画实现思路
```以高度0到auto实现过渡```
- 1.首先遍历所有的一级标题
- 2.点击一级标题的时候判断二级标题容器高度
- 3.如果为0说明二级标题容器未显示
- 3.1获取当前点击的一级标题内的二级标题得到数组
- 3.2将所有二级标题的高度相加赋值给h
- 3.3点击二级标题的时候给当前二级标题添加active类表示激活状态,active样式在css中定义,兄弟元素移除active类,**阻止冒泡**
- 3.4设置当前二级标题容器的高度为h,使用animate方法添加动画
- 3.5给当前一级标题的第一个二级标题添加active类并且移除兄弟元素的active类
- 3.6隐藏兄弟元素的二级标题容器(设置高度为0)
- 3.7给当前一级标题添加active类并移除兄弟元素的active类
- 4.否则使用animate方法设置当前一级标题的二级标题容器高度为0
## 特别说明
- 1.[个人博客](http://xueshuai.top)
- 2.只提供思路,如果想用的话尽量下载下来自己看看
- 3.随时可能会废弃,有时间会更新
- 4.代码中的iconfont类是使用了iconfont字体图标,这里没办法引入所以没显示