Html
    Css
    Js
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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

js树形代码(原创)

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

0