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字体图标,这里没办法引入所以没显示